el-table 可编辑表格

实现一个对表格新增行、删除行，表格单元格点击进行文本和输入控件的切换

主要依赖单元格单击事件cell-click来进行实现

通过对每一个需切换的添加一个edit标记 来进行区分输入控件与文本的切换

示例是自定义表格的写法, 如果是请求后台的数据 需要在数据来源进行手动遍历添加edit

<template>
  <div>
    <el-button type="primary" @click="addRow">新增行</el-button>
    <el-button :disabled="!selectRows.length" type="primary" @click="delRow">删除行</el-button>
    <el-table :data="configList" @cell-click="cellClick" @selection-change="selectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="name" min-width="160px" label="名称">
        <template slot-scope="{row}">
          <el-input v-if="row.edit" v-model="row.name"></el-input>
          <div v-else>
            {{ row.name }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" min-width="160px" label="地址">
        <template slot-scope="{row}">
          <el-select v-if="row.edit1" v-model="row.address">
            <option v-for="(item) in addressList" :key="item.value" :label="item.label" :value="item.value"></option>
          </el-select>
          <div v-else>
            {{ row.address }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      configList: [],
      selectRows: [],
      addressList[
        {
          label: '北京',
          value: '北京'
        },
        {
          label: '上海',
          value: '上海'
        },
        {
          label: '广州',
          value: '广州'
        }
      ]
    }
  },
  methods: {
    addRow() {
      this.configList.push({
        name: null,
        address: null,
        edit: false,
        edit1: false
      })
    },
    
    delRow() {
      this.selectRows.forEach(row => {
        const index = this.configList.indexOf(row)
        if (index != -1) {
          this.confing.splice(index, 1)
        }
      })
    },
    selectionChange(val) {
      this.selectRows = val
    },
    cellClick(row, column, cell, event) {
      const index = this.configList.indexOf(row)

      // 关闭其他行的输入控件
      this.configList.forEach((item, i) => {
        if (index != i) {
          item.edit = false
          item.edit1 = false
        }
      })

      // 关闭当前行的其他列输入控件
      this.configList[index].edit = false
      this.configList[index].edit1 = false

      // 根据每一列的属性, 点击哪一个 哪一个切换到展示输入控件状态
      const property = column.property
      switch (property) {
        case 'name':
          this.configList[index].edit = true
          break;
        case 'address':
          this.configList[index].edit1 = true
          break;
        default:
          break;
      }
    },

  },
}
</script>

<style scoped></style>