【vue + elementUI】表格内输入框校验 + 动态显示表格头

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="item in dynamicColumns"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label">
      <template slot-scope="scope">
        <el-input
          v-model="scope.row[scope.column.property]"
          @blur="handleInputBlur(scope.row, scope.column.property)">
        </el-input>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: 'Tom', address: 'No.189, Grove St, Los Angeles' },
        // ...更多数据
      ],
      dynamicColumns: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '地址', prop: 'address' },
        // ...更多列
      ]
    };
  },
  methods: {
    handleInputBlur(row, prop) {
      // 这里可以添加你的验证逻辑
      console.log(`${row[prop]}字段的值已经变更。`);
    }
  }
};
</script>

这个例子展示了如何在Vue和Element UI中创建一个带有输入框的表格，并在输入框失去焦点时进行验证。dynamicColumns数组定义了表格的列，而tableData数组提供了表格的数据。每个el-table-column都使用v-for动态创建，并包含一个el-input组件用于输入数据。当输入框失去焦点时，handleInputBlur方法被触发，你可以在这里添加你的验证逻辑。