Vue 表格动态添加行/删除行

<template>
  <div class="elife-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain size="mini" @click="handleAdd"
          >新增</el-button
        >
        <el-button
          :disabled="showAble"
          type="info"
          plain
          size="mini"
          @click="handleCancel"
          >取消</el-button
        >
      </el-col>
    </el-row>

    <!-- 表格信息 -->
    <div v-show="showTable">
      <el-table
        v-loading="loading"
        :data="dataList"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column
          label="字段1"
          prop="value1"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.editable">
              <el-input v-model="scope.row.value1"></el-input>
            </div>
            <div v-else>
              {{ scope.row.value1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="字段2"
          prop="value2"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.editable">
              <el-input v-model="scope.row.value2"></el-input>
            </div>
            <div v-else>
              {{ scope.row.value2 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="字段3"
          prop="value3"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.editable">
              <el-input v-model="scope.row.value3"></el-input>
            </div>
            <div v-else>
              {{ scope.row.value3 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="字段4"
          prop="value4"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.editable">
              <el-input v-model="scope.row.value4"></el-input>
            </div>
            <div v-else>
              {{ scope.row.value4 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              v-show="scope.row.editable"
              size="mini"
              type="text"
              @click="handleSave(scope.$index, scope.row)"
              >保存</el-button
            >
            <el-button
              v-show="scope.row.editable"
              size="mini"
              type="text"
              @click="handleSave(scope.$index, scope.row)"
              >取消</el-button
            >
            <el-button
              v-show="!scope.row.editable"
              size="mini"
              type="text"
              @click="handleUpdate(scope.$index, scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              @click="handleDetele(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import * as Config from "./data.js";
export default {
  name: "WarningManage", // 预警管理
  data() {
    return {
      showAble: true,
      // 遮罩层
      loading: false,
      // 数据集
      dataList: [],
      showTable: true,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取数据
    getList() {
      this.loading = true;
      this.dataList = Config.warningData;
      this.dataList.map((item) => {
        item.editable = false;
      });
      this.total = this.dataList.length;
      this.loading = false;
    },

    handleAdd() {
      let obj = {};
      obj.editable = true;
      this.showAble = false;
      this.dataList.push(obj);
    },

    handleCancel() {
      this.dataList.splice(-1, 1);
      this.showAble = true;
    },

    handleSave(data1, data2) {
      this.showTable = false;
      this.dataList[data1].editable = false;
      this.showAble = true;
      this.showTable = true;
    },

    handleUpdate(data1, data2) {
      console.log("111", data1);
      this.showTable = false;
      this.dataList[data1].editable = true;
      this.showTable = true;
      // this.showAble = true;
    },

    handleDetele(index) {
      this.dataList.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.cell-text {
  color: #1890ff;
  cursor: pointer;
}
</style>