element封装 table表格 ，插槽的使用，修改el-table-column的值

在Element UI中，el-table 和 el-table-column 组件被用来创建表格。如果你想要在 el-table-column 中使用插槽来自定义列的内容，并且能够修改该列的值，你可以使用 scoped slots 来实现。

以下是一个简单的例子，展示如何使用插槽来修改 el-table-column 的值：

<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-model="scope.row.name" @change="handleNameChange(scope.row)"></el-input>
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '张三'
      }, {
        date: '2016-05-04',
        name: '李四'
      }, {
        date: '2016-05-01',
        name: '王五'
      }, {
        date: '2016-05-03',
        name: '赵六'
      }]
    };
  },
  methods: {
    handleNameChange(row) {
      console.log('姓名已修改为:', row.name);
      // 这里可以执行其他逻辑，例如更新数据库等
    }
  }
};
</script>

在这个例子中，我们有一个包含日期和姓名的表格。在姓名这一列，我们使用了 el-input 组件来让用户直接编辑数据。通过 v-model 绑定当前行的 name 属性，并且监听 change 事件来执行数据修改后的逻辑。这样，当用户编辑姓名时，对应行的数据会实时更新，并且可以执行其他自定义逻辑，例如更新数据库等。