基于VUE+element-ui实现的简易可编辑表格

实现效果如图

以下为实现代码

<template>
  <el-card>
    <el-button type="" @click="addRow()">增加一行</el-button>
    <el-table :data="tableData">
      <el-table-column
        v-for="column in columnList"
        :key="column.key"
        :label="column.label"
        :prop="column.prop"
        :formatter="column.render"
        :render-header="column.renderHeader"
      />
    </el-table>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{ id: "1", area: "葫芦岛", name: "岛市老八", edit: false }],
      columnList: [
        {
          id: 1,
          prop: "name",
          label: "名称",
          // eslint-disable-next-line no-unused-vars
          render: (row, column, cellValue, index) => {
            return row.edit ? (
              <el-input v-model={row.name}></el-input>
            ) : (
              row.name
            );
          },
        },
        {
          id: 2,
          prop: "area",
          label: "地区",
          width: 200,
          // eslint-disable-next-line no-unused-vars
          render: (row, column, cellValue, index) => {
            return row.edit ? (
              <el-input v-model={row.area}></el-input>
            ) : (
              row.area
            );
          },
        },
        {
          label: "操作",
          width: 30,
          render: (row, column, cellValue, index) => {
            return (
              <div>
                {row.edit ? (
                  <el-button type="text" onClick={() => this.saveRow(index)}>
                    保存
                  </el-button>
                ) : (
                  <el-button type="text" onClick={() => this.editRow(index)}>
                    编辑
                  </el-button>
                )}
                <el-popover placement="top" ref={`delete-${index}`}>
                  <p>{`确定删除吗`}</p>
                  <div style="text-align: right; margin: 0">
                    <el-button
                      type="primary"
                      onClick={() => {
                        this.$refs[`delete-${index}`].doClose();
                      }}
                      plain
                    >
                      取消
                    </el-button>
                    <el-button
                      type="primary"
                      onClick={() => {
                        this.$refs[`delete-${index}`].doClose();
                        this.deleteRow(index);
                      }}
                    >
                      确定
                    </el-button>
                  </div>
                  <el-button
                    style="margin-left: 16px"
                    type="text"
                    slot="reference"
                  >
                    删除
                  </el-button>
                </el-popover>
              </div>
            );
          },
        },
      ],
    };
  },
  methods: {
    // 添加行
    addRow() {
      const { tableData } = this;
      const rowData = {
        id: "",
        name: "",
        area: "",
        edit: true,
      };
      tableData.push(rowData);
    },
    // 保存行
    saveRow(index) {
      const { tableData } = this;
      tableData[index].edit = false;
    },
    // 编辑行
    editRow(index) {
      const { tableData } = this;
      tableData[index].edit = true;
    },
    // 删除行
    deleteRow(index) {
      this.tableData.splice(index, 1);
    },
  },
};
</script>

<style>
</style>