elementui动态el-table-column并插入数据写法？

可以使用 v-for 指令动态生成 el-table-column，同时使用 :prop 和 :label 绑定数据。具体代码如下：

<el-table :data="tableData">
  <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label"></el-table-column>
</el-table>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 }
      ],
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' }
      ]
    }
  }
}
</script>

在上面的代码中，tableData 是表格数据，columns 是动态生成的 el-table-column 的配置项，包括每列的 prop 和 label。

相关问题

el-table-column里内容错乱

el-table-column里内容错乱的问题可能是由于列位置和表头样式错乱导致的。解决这个问题的方法有两种：

1. 使用`:key`属性：在el-table-column标签中添加`:key`属性，并设置为一个随机数，例如`:key="Math.random()"`。这样可以确保每次渲染时都会生成一个新的key，从而避免错乱的问题。修正后的写法如下所示：

<el-table-column label="test" :key="Math.random()" v-if="active !== '2'"></el-table-column>

2. 覆盖样式：如果el-table-column列加了fixed="right"操作后出现高度错乱的问题，可以通过覆盖样式来解决。在样式中添加以下代码：

.custom_table ::v-deep .el-table__fixed-right, .custom_table::v-deep .el-table__fixed {
  height: 100% !important;
}

这样可以将el-table__fixed-right和el-table__fixed的高度设置为100%，从而避免高度错乱的问题。

el-table rules 正则校验写法

为了给 el-table 添加正则校验规则，需要在 el-table-column 中使用 scoped-slot 和 validator 函数。如果要对某一列添加正则校验规则，需要将 prop 设置为值所呈现的字段名。下面是一个示例代码：

<el-table :data="tableData">
  <el-table-column prop="name">
    <template slot-scope="scope">
      <span>{{ scope.row.name }}</span>
    </template>
    <el-table-column-validator :rules="[{ validator: regExpValidator, trigger: 'blur' }]">
      <template slot-scope="scope">
        <el-input v-model="scope.row.name"></el-input>
      </template>
    </el-table-column-validator>
  </el-table-column>
</el-table>

在以上代码中，我们通过在 el-table-column 中的 scoped-slot 中使用 el-input 来呈现值的字段名。然后，我们使用 el-table-column-validator 组件来添加正则校验规则。el-table-column-validator 组件提供了一个名为 rules 的 prop，它接受一个键为 validator 的对象和一个键为 trigger 的字符串。在这里，我们使用 regExpValidator 函数作为我们的 validator 函数，它会对输入框的值进行正则匹配。当用户失去焦点时，我们触发校验（ trigger: 'blur'）。

请注意，即使我们在这里使用了 validator 函数来校验正则表达式，它也只是一个 Vue.js 组件。如果您需求更为复杂的校验规则，建议您使用 el-form 或校验插件，如 VeeValidate。