Element UI是一款基于Vue.js的桌面端组件库，提供了丰富的组件，其中包括了强大的表格组件。在实际开发中，我们经常会遇到需要动态生成表格列的需求，同时也需要对表格列进行自定义渲染，以满足业务的需求。本文将介绍如何在Element UI的表格组件中实现表格列的动态生成与自定义渲染。

动态生成表格列

在Element UI的表格组件中，我们可以通过设置columns属性来定义表格的列。要实现动态生成的功能，我们可以将columns属性绑定到一个变量上，并在需要的时候动态修改这个变量的值。

示例代码：

<template>
  <el-table :data="tableData" :columns="columns"></el-table>
  <el-button @click="addColumn">新增列</el-button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
      ],
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
      ],
    };
  },
  methods: {
    addColumn() {
      this.columns.push({ prop: 'gender', label: '性别' });
    },
  },
};
</script>

在上述示例中，表格的列通过columns属性进行定义，初始时包含了姓名和年龄两列。当点击”新增列”按钮时，会执行addColumn方法，在columns数组中新增一列，即”性别”列。这样，表格中的列就实现了动态生成。

自定义渲染表格列

除了动态生成表格列，我们有时还需要对表格列进行自定义渲染，例如，我们希望在年龄这一列中显示不同的背景色，以区分不同年龄段的人员。

在Element UI的表格组件中，我们可以通过使用scoped-slot来实现自定义渲染。我们可以为表格列定义一个slot="custom"，在这个插槽中，我们可以根据当前单元格的值进行渲染。

示例代码：

<template>
  <el-table :data="tableData" :columns="columns">
    <template v-slot:custom="{ row }">
      <div :style="{ background: getBackgroundColor(row.age) }">
        {{ row.age }}
      </div>
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18 },
        { name: '李四', age: 20 },
      ],
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄', slot: 'custom' },
      ],
    };
  },
  methods: {
    getBackgroundColor(age) {
      if (age < 20) {
        return 'green';
      } else if (age >= 20 && age < 30) {
        return 'yellow';
      } else {
        return 'red';
      }
    },
  },
};
</script>

在上述示例中，我们为”年龄”这一列定义了一个插槽slot="custom"，在这个插槽中，根据当前行的年龄值，设置了不同的背景色。通过定义这个插槽，我们可以实现对表格列的自定义渲染。

总结：Element UI的表格组件提供了丰富的功能，包括动态生成表格列和自定义渲染表格列。通过合理运用这些特性，我们可以轻松地实现各种复杂的表格需求。

本文来自极简博客，作者：码农日志，转载请注明原文链接：Element UI中的表格列动态生成与自定义渲染