VUE+ELEMENT实现表格单元格编辑

使用 Vue.js 和 Element UI 实现表格单元格编辑的步骤如下：

1. 导入 Element UI 的表格和表单组件：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <!-- 表格列定义 -->
    </el-table>
  </div>
</template>

<script>
import { ElTable, ElTableColumn, ElInput } from 'element-ui'

export default {
  components: {
    ElTable,
    ElTableColumn,
    ElInput
  },
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ],
      editIndex: -1
    }
  }
}
</script>

2. 在表格中的每一行定义一个编辑按钮，点击编辑按钮后将当前行进入编辑状态：

<el-table :data="tableData" style="width: 100%">
  <el-table-column label="姓名">
    <template slot-scope="scope">
      <template v-if="editIndex !== scope.$index">
        {{ scope.row.name }}
      </template>
      <template v-else>
        <el-input v-model="scope.row.name"></el-input>
      </template>
    </template>
  </el-table-column>
  <el-table-column label="年龄">
    <template slot-scope="scope">
      <template v-if="editIndex !== scope.$index">
        {{ scope.row.age }}
      </template>
      <template v-else>
        <el-input v-model="scope.row.age"></el-input>
      </template>
    </template>
  </el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <template v-if="editIndex !== scope.$index">
        <el-button type="primary" size="small" @click="edit(scope.$index)">编辑</el-button>
      </template>
      <template v-else>
        <el-button type="success" size="small" @click="save(scope.$index)">保存</el-button>
        <el-button type="warning" size="small" @click="cancel(scope.$index)">取消</el-button>
      </template>
    </template>
  </el-table-column>
</el-table>

3. 定义编辑按钮的点击事件和保存、取消按钮的点击事件：

export default {
  // 省略其他代码
  methods: {
    edit(index) {
      this.editIndex = index
    },
    save(index) {
      this.editIndex = -1
    },
    cancel(index) {
      this.editIndex = -1
    }
  }
}

完整代码如下：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名">
        <template slot-scope="scope">
          <template v-if="editIndex !== scope.$index">
            {{ scope.row.name }}
          </template>
          <template v-else>
            <el-input v-model="scope.row.name"></el-input>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="年龄">
        <template slot-scope="scope">
          <template v-if="editIndex !== scope.$index">
            {{ scope.row.age }}
          </template>
          <template v-else>
            <el-input v-model="scope.row.age"></el-input>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <template v-if="editIndex !== scope.$index">
            <el-button type="primary" size="small" @click="edit(scope.$index)">编辑</el-button>
          </template>
          <template v-else>
            <el-button type="success" size="small" @click="save(scope.$index)">保存</el-button>
            <el-button type="warning" size="small" @click="cancel(scope.$index)">取消</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ElTable, ElTableColumn, ElInput, ElButton } from 'element-ui'

export default {
  components: {
    ElTable,
    ElTableColumn,
    ElInput,
    ElButton
  },
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ],
      editIndex: -1
    }
  },
  methods: {
    edit(index) {
      this.editIndex = index
    },
    save(index) {
      this.editIndex = -1
    },
    cancel(index) {
      this.editIndex = -1
    }
  }
}
</script>

这样就可以通过 Vue.js 和 Element UI 实现表格单元格编辑了。