element-ui 表格可编辑

<template>
  <el-table :data="tableData" style="width: 100%" @cell-click="handleEdit">
    <template v-for="(item, index) in columData">
      <el-table-column :label="item.label" :key="index" :prop="item.prop">
        <template slot-scope="scope">
          <el-input
            @blur="blur"
            ref="flag"
            v-if="
              item.edit == true && 'flag' + item.prop + scope.row.index == value
            "
            v-model="scope.row[scope.column.property]"
          ></el-input>

          <span v-else>{{ scope.row[scope.column.property] }} </span>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      columData: [
        {
          label: "姓名",
          prop: "name",
          edit: true,
        },
        {
          label: "地址",
          prop: "address",
        },
      ],
      tableData: [
        {
          index: 0,
          name: "chen虎",
          address: "1518 弄",
        },
        {
          index: 1,
          name: "小虎",
          address: "1517 弄",
        },
        {
          index: 2,
          name: "王虎",
          address: "1519 弄",
        },
        {
          index: 3,
          name: "王小",
          address: " 1516 弄",
        },
      ],
    };
  },
  methods: {
    handleEdit(row, e) {
      this.value = "flag" + e.property + row.index;
      this.$nextTick(() => {
        if (this.$refs.flag[0]) {
          this.$refs.flag[0].focus();
        }
      });
    },
    blur() {
      this.value = "";
    },
  },
};
</script>

<style scoped lang="less">
</style>

效果