element-e作业

<template>
  <div id="todolist">
    <h2>To do list</h2>
    <el-table-column>
      <el-input v-model="search" size="mini" placeholder="输入添加内容" style=" 135px"/>
      <el-button type="primary" size="mini" @click="addItem()">增加</el-button>
    </el-table-column>
    <el-table :data="tableData" style=" 40%">
      <el-table-column type="index" label="序号" width="200px"></el-table-column>
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column>
        <template slot="header">
          <el-button type="primary" size="mini" @click="jump">跳转</el-button>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="upItem(scope.$index)">上移</el-button>
          <el-button size="mini" @click="downItem(scope.$index)">下移</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "Card",
    data() {
      return {
        url: '/Weather',
        tableData: [{
          name: '学习html',
        }, {
          name: '学习java',
        }, {
          name: '学习python',
        }, {
          name: '学习php',
        }],
        search: ''
      }
    },
    methods: {
      jump() {
        this.$router.push('/home')
      },
      addItem() {
        if (this.search == "") {
          return false;
        }
        let a = {name: this.search};
        this.tableData.push(a);
        this.search = ""
      },
      handleDelete(index) {
        this.tableData.splice(index, 1);
      },
      upItem(key) {
        if (key == 0) {
          return false;
        }
        // 向上移动
        let result = this.tableData.splice(key, 1);
        this.tableData.splice(key - 1, 0, result[0]);
      },
      downItem(key) {
        // 向下移动
        let result = this.tableData.splice(key, 1);
        this.tableData.splice(key + 1, 0, result[0]);
      }
    }
  }
</script>

<style scoped>

</style>

<template>
  <div style="margin: auto; 1000px;margin-top: 100px">
    <h2>商品页面</h2>
    <el-button type="primary" size="mini" @click="dialogVisible = true;goods_index=-1;">添加商品</el-button>
    <el-table :data="tableData" style=" 100%" show-summary :summary-method="getSummaries">
      <el-table-column type="index" label="序号" width="200px"></el-table-column>
      <el-table-column prop="name" label="商品标题" width="180"></el-table-column>
      <el-table-column prop="num" label="商品数量" width="180"></el-table-column>
      <el-table-column prop="price" label="商品价格" width="180"></el-table-column>
      <el-table-column>
        <template slot="header">
          <el-button type="primary" size="mini" @click="jump">跳转</el-button>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="update(scope.$index)">编辑</el-button>
          <el-button size="mini" type="danger" @click="del(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="goods_name"></el-input>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="goods_num"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="goods_price"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
    </el-dialog>


  </div>
</template>

<script>
  export default {
    name: "home",
    data() {
      return {
        dialogVisible: false,
        goods_index: -1,
        goods_name: "",
        goods_num: "",
        goods_price: "",
        tableData: [
          {"name": "python入门", "num": 27, "price": 150},
          {"name": "python进阶", "num": 27, "price": 100},
          {"name": "python高级", "num": 27, "price": 75},
          {"name": "python研究", "num": 27, "price": 60},
          {"name": "python放弃", "num": 27, "price": 110},
        ],
      }
    },
    methods: {
      jump() {
        this.$router.push('/Card')
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      cut(value, index) {
        if (value.num <= 0) {
          this.tableData.splice(index, 1);
        } else {
          value.num--;
        }
      },
      save() {
        // 保存数据[添加数据]
        if (this.goods_index == -1) {
          this.tableData.push({
            "name": this.goods_name,
            "num": parseInt(this.goods_num),
            "price": parseFloat(this.goods_price),
          });
        } else {
          this.tableData[this.goods_index].name = this.goods_name;
          this.tableData[this.goods_index].num = parseInt(this.goods_num);
          this.tableData[this.goods_index].price = parseFloat(this.goods_price);
        }
        this.cancel();
      },
      cancel() {
        this.dialogVisible = false;
        this.goods_index = -1;
        this.goods_name = "";
        this.goods_num = "";
        this.goods_price = "";
      },
      del(index) {
        // 删除数据
        this.tableData.splice(index, 1);
      },
      update(index) {
        // 先弹窗
        this.dialogVisible = true;
        // 显示当前编辑的商品信息
        this.goods_index = index;
        this.goods_name = this.tableData[index].name;
        this.goods_num = this.tableData[index].num;
        this.goods_price = this.tableData[index].price;
        // 当用户点击保存时，修改对应数据
      },
      getSummaries(param) {
        const {columns, data} = param;
        const sums = [];
        let sum = 0;
        for (let i in this.tableData) {
          sum = sum + this.tableData[i].num * this.tableData[i].price
        }
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
          } else if (index === 4) {
            sums[index] = sum + '元';
          }
        });
        return sums;
      }
    }
  }

</script>

<style scoped>

</style>