ElementUI 动态渲染 el-table

动态生成列

假设我们有一个 columns 数组，用于存储表格的列信息，每个元素包含列的 prop 和 label：

登录后复制

data() {
  return {
    tableData: [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles'
      },
      {
        date: '2016-05-02',
        name: 'Jerry',
        address: 'No. 189, Grove St, Los Angeles'
      }
    ],
    columns: [
      { prop: 'date', label: '日期' },
      { prop: 'name', label: '姓名' },
      { prop: 'address', label: '地址' }
    ]
  };
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.

接着，我们在模板中使用 v-for 指令动态生成 el-table-column 组件：

登录后复制

<template>
  <div>
    <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>
  </div>
</template>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.

这样，我们就实现了根据 columns 数组动态生成表格的列。如果需要添加或删除列，只需修改 columns 数组即可。

动态生成数据

在实际应用中，数据源往往是动态变化的。我们可以通过调用 API 或监听用户操作来更新 tableData。以下是一个简单的示例：

登录后复制

<template>
  <div>
    <el-button @click="fetchData">获取数据</el-button>
    <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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      columns: [
        { prop: 'date', label: '日期' },
        { prop: 'name', label: '姓名' },
        { prop: 'address', label: '地址' }
      ]
    };
  },
  methods: {
    fetchData() {
      // 模拟 API 调用
      setTimeout(() => {
        this.tableData = [
          {
            date: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles'
          },
          {
            date: '2016-05-02',
            name: 'Jerry',
            address: 'No. 189, Grove St, Los Angeles'
          }
        ];
      }, 1000);
    }
  }
};
</script>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.
• 34.
• 35.
• 36.
• 37.
• 38.
• 39.
• 40.
• 41.
• 42.
• 43.
• 44.
• 45.
• 46.
• 47.

在这个示例中，我们添加了一个按钮，点击按钮时调用 fetchData 方法，从而更新 tableData。通过这种方式，我们可以实现根据实际需求动态更新表格数据。

更高级的动态渲染

上述示例已经展示了基本的动态渲染技巧，但在实际应用中，我们可能需要处理更加复杂的场景。例如：

根据用户角色动态显示不同的列

动态设置列的属性，如宽度、对齐方式、排序等

动态渲染嵌套表格或自定义列内容

下面，我们逐一探讨这些高级应用场景。

根据用户角色动态显示列

在某些应用中，不同的用户角色需要看到不同的表格列。我们可以通过条件渲染来实现这一需求：

登录后复制

data() {
  return {
    tableData: [
      // 数据略
    ],
    columns: [
      { prop: 'date', label: '日期', roles: ['admin', 'user'] },
      { prop: 'name', label: '姓名', roles: ['admin'] },
      { prop: 'address', label: '地址', roles: ['user'] }
    ],
    userRole: 'user'
  };
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.

在模板中，我们使用 v-if 指令根据用户角色动态渲染列：

登录后复制

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        v-if="column.roles.includes(userRole)">
      </el-table-column>
    </el-table>
  </div>
</template>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.

通过这种方式，我们可以根据用户角色动态显示不同的表格列。

动态设置列的属性

在实际应用中，我们可能需要动态设置列的属性，如宽度、对齐方式、排序等。我们可以在 columns 数组中定义这些属性，然后在模板中动态应用：

登录后复制

data() {
  return {
    tableData: [
      // 数据略
    ],
    columns: [
      { prop: 'date', label: '日期', width: 180, align: 'center', sortable: true },
      { prop: 'name', label: '姓名', width: 180, align: 'left', sortable: false },
      { prop: 'address', label: '地址', align: 'right' }
    ]
  };
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.

在模板中，我们使用属性绑定动态应用这些属性：

登录后复制

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

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.

动态渲染嵌套表格或自定义列内容

在某些复杂场景中，我们可能需要在表格中嵌套其他表格或自定义列内容。我们可以通过 scoped slot 实现这一需求：

登录后复制

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label">
        <template v-slot="scope">
          <!-- 自定义列内容 -->
          <div v-if="column.custom">{{ customRender(scope.row, column.prop) }}</div>
          <!-- 默认列内容 -->
          <div v-else>{{ scope.row[column.prop] }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        // 数据略
      ],
      columns: [
        { prop: 'date', label: '日期' },
        { prop: 'name', label: '姓名', custom: true },
        { prop: 'address', label: '地址' }
      ]
    };
  },
  methods: {
    customRender(row, prop) {
      // 自定义渲染逻辑
      return `${row[prop]} (custom)`;
    }
  }
};
</script>

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.
• 30.
• 31.
• 32.
• 33.
• 34.
• 35.
• 36.
• 37.
• 38.
• 39.
• 40.
• 41.

在这个示例中，我们通过 v-slot 插槽自定义了列内容。如果 column.custom 为 true，则调用 customRender 方法渲染自定义内容，否则显示默认内容。