[VUE]使用element ui 重新写组件table，实现动态列自定义加载

最新推荐文章于 2023-07-17 11:23:28 发布

原创

最新推荐文章于 2023-07-17 11:23:28 发布 · 6.3k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue中重写Element UI的Table组件，以实现动态列显示和自定义加载。通过设置状态列来控制显示禁用或启用的文字，并运用过滤器改变el-tag的样式。同时，给出了组件调用方式和列数据格式的示例，以及模拟数据的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

table.vue table组件 ,重写组件当状态列为0时显示禁用，为1时显示启用，并添加过滤器更改 el-tag的样式

<template>
  <el-table :data="tableData" border element-loading-text="拼命加载中">
    <el-table-column
      v-for="(th, key) in tableKey"
      :key="key"
      :prop="th.prop"
      :label="th.label"
      :fixed="th.fixed"
      :width="th.width"
      :align="th.align"
      show-overflow-tooltip="true"
    >
      <template slot-scope="scope">
        <div v-if="th.label === '状态'">
          <el-tag :type=" scope.row[th.prop] | statusFilter">{
  
  { scope.row[th.prop] === 1 ? '启用' : '禁用' }}</el-tag>
        </div>
        <div v-else>
          <span>{
  
  { scope.row[th.prop] }}</span>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: 'Table',
  filters: {
    statusFilter(status) {
      const statusMap = {