Vue + ElementUI 实现可编辑表格及校验

<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>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{ date: '2016-05-02', name: '王小虎', ... }, ...]
    }
  },
  methods: {
    handleEdit(index, row) {
      // 这里可以添加对输入的验证逻辑
      console.log(`第${index}行的姓名编辑为: ${row.name}`);
    }
  }
}
</script>

这个简单的例子展示了如何使用Vue和ElementUI创建一个可编辑的表格，并在用户编辑信息时触发一个验证函数。在实际应用中，你可以在handleEdit方法中添加更复杂的验证逻辑，例如检查名字是否已存在，或者格式是否正确。