vue+element ui项目总结点（六）table编辑当前行、删除当前行、新增、合计操作

具体属性方法参考官方网站：http://element-cn.eleme.io/#/zh-CN/component/installation

<template>
  <div class="table_box">
    <div class="btn" style="text-align: left;">
      <el-button type="primary" @click="addItem">新增</el-button>
    </div>
    <el-table :data="list" border :summary-method="getSummaries" show-summary style="width: 100%;" stripe height="260">
      <el-table-column label="序号" width="80px" align='center'>
        <template slot-scope="scope">
          <span>{{ scope.$index +1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最喜欢吃" align='center'>
        <template slot-scope="scope">
          <span v-if="!scope.row.isEgdit">{{['橙子','橘子','榴莲'][scope.row.fruitSort-1]}}</span>
          <el-select placeholder="请选择" v-if="scope.row.isEgdit" v-model="scope.row.fruitSort">
            <el-option v-for="(item, index) in ['橙子','橘子','榴莲']" :key="index+1" :label="item" :value="index+1">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="firstNum" label="第一周吃的数量" align='center'>
        <template slot-scope="scope">
          <span v-if="!scope.row.isEgdit">{{scope.row.firstNum}}</span>
          <el-input v-if="scope.row.isEgdit" v-model="scope.row.firstNum"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="secondNum" label="第二周吃的数量" align='center'>
        <template slot-scope="scope">
          <span v-if="!scope.row.isEgdit">{{scope.row.secondNum}}</span>
          <el-input v-if="scope.row.isEgdit" v-model="scope.row.secondNum"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="thirdNum" label="第三周吃的数量" align='center'>
        <template slot-scope="scope">
          <span v-if="!scope.row.isEgdit">{{scope.row.thirdNum}}</span>
          <el-input v-if="scope.row.isEgdit" v-model="scope.row.thirdNum"></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="fourthNum" label="第四周吃的数量" align='center'>
        <template slot-scope="scope">
          <span v-if="!scope.row.isEgdit">{{scope.row.fourthNum}}</span>
          <el-input v-if="scope.row.isEgdit" v-model="scope.row.fourthNum"></el-input>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align='center'>
        <template slot-scope="scope">
          <el-button v-if="!scope.row.isEgdit" type="primary" size="small" @click='edit(scope.$index,scope.row)' icon="el-icon-edit" circle></el-button>
          <el-button v-if="scope.row.isEgdit" type="success" size="small" @click='editSuccess(scope.$index,scope.row)' icon="el-icon-check" circle></el-button>
          <el-button @click.native.prevent="deleteItem(scope.$index, list)" type="danger" size="small" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 30px;">
      <el-button type="primary" @click="goNextPage">跳转页面</el-button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [{
        id: 1,
        fruitSort: 1,
        firstNum: 10,
        secondNum: 3,
        thirdNum: 4,
        fourthNum: 6,
      }, {
        id: 2,
        fruitSort: 2,
        firstNum: 7,
        secondNum: 6,
        thirdNum: 8,
        fourthNum: 2,
      }, {
        id: 3,
        fruitSort: 3,
        firstNum: 5,
        secondNum: 6,
        thirdNum: 8,
        fourthNum: 9,
      }, {
        id: 4,
        fruitSort: 3,
        firstNum: 10,
        secondNum: 3,
        thirdNum: 4,
        fourthNum: 6,
      }],
    }
  },
  methods: {
    //合计 表格每一列需要带上prop
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总数量';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += '(个)';
        } else {
          sums[index] = '';
        }
      });

      return sums;
    },
    //新增数据
    addItem() {
      let item = {
        id: null,
        fruitSort: null,
        firstNum: null,
        secondNum: null,
        thirdNum: null,
        fourthNum: null,
        isEgdit: true
      }
      this.list.push(item)
    },
    //删除数据
    deleteItem(index, list) {
      list.splice(index, 1);
    },
    //编辑数据
    edit(index, row) {
      this.$set(row, 'isEgdit', true)
    },
    //编辑成功
    editSuccess(index, row) {
      this.$set(row, 'isEgdit', false)
    },
    //跳转下一页面
    goNextPage() {
      this.$router.push({ name: 'echartTest' })
    }
  }

}

</script>

 

__EOF__

本文作者：蓝色帅-橙子哥
本文链接：https://www.cnblogs.com/lhl66/p/10212624.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！