vue+element ui----table編輯當(dāng)前行、刪除當(dāng)前行、新增、合計(jì)操作文章來源地址http://www.zghlxwxcb.cn/news/detail-502988.html

<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="第一周吃的數(shù)量" 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="第二周吃的數(shù)量" 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="第三周吃的數(shù)量" 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="第四周吃的數(shù)量" 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">跳轉(zhuǎn)頁面</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: {
    //合計(jì) 表格每一列需要帶上prop
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '總數(shù)量';
          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] += '(個(gè))';
        } else {
          sums[index] = '';
        }
      });
 
      return sums;
    },
    //新增數(shù)據(jù)
    addItem() {
      let item = {
        id: null,
        fruitSort: null,
        firstNum: null,
        secondNum: null,
        thirdNum: null,
        fourthNum: null,
        isEgdit: true
      }
      this.list.push(item)
    },
    //刪除數(shù)據(jù)
    deleteItem(index, list) {
      list.splice(index, 1);
    },
    //編輯數(shù)據(jù)
    edit(index, row) {
      this.$set(row, 'isEgdit', true)
    },
    //編輯成功
    editSuccess(index, row) {
      this.$set(row, 'isEgdit', false)
    },
    //跳轉(zhuǎn)下一頁面
    goNextPage() {
      this.$router.push({ name: 'echartTest' })
    }
  }
 
}
 
</script>

到了這里，關(guān)于vue+element ui----table編輯當(dāng)前行、刪除當(dāng)前行、新增、合計(jì)操作的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！