Vue项目-Element-UI可编辑表格

在Vue项目中使用Element-UI创建一个可编辑的表格，可以通过el-table组件结合el-input组件实现。以下是一个简单的例子：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template slot-scope="scope">
        <el-input v-model="scope.row.name" @change="handleEdit(scope.$index, scope.row)"></el-input>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="地址">
      <template slot-scope="scope">
        <el-input v-model="scope.row.address" @change="handleEdit(scope.$index, scope.row)"></el-input>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '赵小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }]
    }
  },
  methods: {
    handleEdit(index, row) {
      // 处理编辑逻辑，例如更新数据库等
      console.log(index, row);
    }
  }
}
</script>

在这个例子中，我们使用了el-table-column的template插槽来定制列的内容，并且将el-input组件的v-model绑定到了当前行的数据上。当输入框的值发生变化时，会触发@change事件，并调用handleEdit方法来处理编辑后的逻辑，例如更新数据库等。这样就实现了一个简单的可编辑表格。