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>