完整的Vue+element-ui table組件實現表格內容的編輯刪除和新行添加小實例

copy 文檔  https://www.cnblogs.com/CodeTheUniverse/p/13213088.html

先上一張頁面展示圖，畫面很簡單（當然這個功能也很簡單，不過筆者剛接觸Vue，為了避免以后出現相同需求再重寫，所以記錄一下）

 

 老樣子，直接貼代碼，不多BB

<template>
  <el-row style="height: 100%;width:100%" type="flex" justify="center">
    <el-col :span="24">
      <el-table
        :data="tableData"
        :stripe="true"
        height="100%"
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          prop="date"
          label="客戶 ID"
          width="auto"
          align="center"
          :resizable="false">
          <template slot-scope="scope">
            <el-input v-if=" isEdit == scope.$index " v-model="scope.row.date" placeholder="請輸入內容" style="text-align: center;"></el-input>
            <span v-if=" isEdit != scope.$index ">{{ scope.row.date }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="地域別"
          width="auto"
          align="center"
          :resizable="false">
          <template slot-scope="scope">
            <el-input v-if=" isEdit == scope.$index " v-model="scope.row.name" placeholder="請輸入內容" style="text-align: center;"></el-input>
            <span v-if=" isEdit != scope.$index ">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="auto"
          align="center"
          :resizable="false">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                v-if=" isEdit == scope.$index "
                size="mini"
                @click="handleEdit(scope.$index, scope.row, 1)">保存</el-button>
              <el-button
                v-if=" isEdit != scope.$index "
                size="mini"
                @click="handleEdit(scope.$index, scope.row, 0)">編輯</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
        <el-button
          slot="append"
          style="width: 100%;border-radius: 0;border-top: 0;border-left: 0;border-right: 0;"
          @click="appendNew">點擊追加一行</el-button>
      </el-table>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎'
        }, {
          date: '2016-05-04',
          name: '王小虎'
        }, {
          date: '2016-05-01',
          name: '王小虎'
        }, {
          date: '2016-05-03',
          name: '王小虎'
        }],
        isEdit: -99
      }
    },
    methods: {
      handleEdit(index, row, status) {
        switch (status) {
          case 0:
            this.isEdit = index;
            break;
          case 1:
            this.isEdit = -99;
            break;
        }
      },
      handleDelete(index, row) {
        this.$confirm('這將會永久刪除該行數據，是否繼續?', '警告', {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
          this.tableData.splice(index, 1);
          this.$message({
            type: 'success',
            message: '刪除成功'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          });
        });
      },
      appendNew(){
        this.tableData.push({
          date: '',
          name: ''
        });
        this.isEdit = this.tableData.length - 1
      },
      tableRowClassName({row, rowIndex}){
        row.index = rowIndex
      }
    }
  }
</script>

<style>
  html, body {
    height: 100%;
  }
</style>