vue+elementUI实现指定列的单元格可编辑

在Vue中结合Element UI实现指定列的单元格可编辑，可以使用el-table的scoped slot功能来自定义单元格的内容。以下是一个简单的例子：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column label="姓名" width="180">
      <template slot-scope="scope">
        <el-input
          v-if="scope.row.edit"
          v-model="scope.row.name"
          size="small"
          @blur="handleInputBlur(scope.row)"
        ></el-input>
        <span v-else>{{ scope.row.name }}</span>
      </template>
    </el-table-column>
    <el-table-column label="操作" width="150">
      <template slot-scope="scope">
        <el-button
          v-if="!scope.row.edit"
          size="small"
          icon="el-icon-edit"
          @click="handleEdit(scope.$index, scope.row)"
        ></el-button>
        <el-button
          v-if="scope.row.edit"
          size="small"
          type="success"
          icon="el-icon-circle-check"
          @click="handleSave(scope.$index, scope.row)"
        ></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        edit: false
      }, {
        date: '2016-05-04',
        name: '李小虎',
        edit: false
      }]
    }
  },
  methods: {
    handleEdit(index, row) {
      row.edit = true; // 切换为编辑状态
    },
    handleSave(index, row) {
      row.edit = false; // 切换为非编辑状态
    },
    handleInputBlur(row) {
      // 输入框失去焦点时的处理逻辑
      row.edit = false;
    }
  }
}
</script>

在这个例子中，我们定义了一个包含日期和姓名的表格。对于姓名列，我们使用template插槽来根据行数据的edit属性决定显示el-input还是span标签。如果edit为true，则显示可编辑的el-input；如果为false，则显示不可编辑的文本内容。编辑状态下的每行数据都有一个保存按钮，点击它会触发handleSave方法，将行的edit属性设置为false，从而结束编辑状态。