Vue ElementUI表格控制怎么显示隐藏对应列

引言

在开发Web应用时，表格（Table）是一个非常常见的组件，用于展示和操作数据。ElementUI 是一个基于 Vue.js 的组件库，提供了丰富的 UI 组件，其中 el-table 是一个非常强大的表格组件。在实际开发中，我们经常会遇到需要动态控制表格列的显示和隐藏的需求。本文将详细介绍如何使用 Vue 和 ElementUI 来实现这一功能。

1. 基本表格结构

首先，我们来看一个基本的 el-table 结构：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2023-10-01',
          name: '张三',
          address: '北京市朝阳区'
        },
        {
          date: '2023-10-02',
          name: '李四',
          address: '上海市浦东新区'
        }
      ]
    };
  }
};
</script>

在这个例子中，我们定义了一个简单的表格，包含三列：日期、姓名和地址。

2. 动态控制列的显示和隐藏

要实现动态控制列的显示和隐藏，我们可以通过以下步骤来实现：

2.1 使用 v-if 控制列的显示和隐藏

v-if 是 Vue 提供的一个指令，用于条件渲染。我们可以利用 v-if 来控制列的显示和隐藏。

<template>
  <div>
    <el-checkbox v-model="showDate">显示日期</el-checkbox>
    <el-checkbox v-model="showName">显示姓名</el-checkbox>
    <el-checkbox v-model="showAddress">显示地址</el-checkbox>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column v-if="showDate" prop="date" label="日期" width="180"></el-table-column>
      <el-table-column v-if="showName" prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column v-if="showAddress" prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2023-10-01',
          name: '张三',
          address: '北京市朝阳区'
        },
        {
          date: '2023-10-02',
          name: '李四',
          address: '上海市浦东新区'
        }
      ],
      showDate: true,
      showName: true,
      showAddress: true
    };
  }
};
</script>

在这个例子中，我们添加了三个 el-checkbox 组件，分别用于控制日期、姓名和地址列的显示和隐藏。通过 v-model 绑定到 showDate、showName 和 showAddress 变量，我们可以动态控制列的显示和隐藏。

2.2 使用 v-for 动态生成列

除了使用 v-if，我们还可以使用 v-for 动态生成列。这种方式更加灵活，适合列的数量和内容动态变化的场景。

<template>
  <div>
    <el-checkbox v-model="showDate">显示日期</el-checkbox>
    <el-checkbox v-model="showName">显示姓名</el-checkbox>
    <el-checkbox v-model="showAddress">显示地址</el-checkbox>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        v-if="column.visible"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2023-10-01',
          name: '张三',
          address: '北京市朝阳区'
        },
        {
          date: '2023-10-02',
          name: '李四',
          address: '上海市浦东新区'
        }
      ],
      columns: [
        { prop: 'date', label: '日期', width: '180', visible: true },
        { prop: 'name', label: '姓名', width: '180', visible: true },
        { prop: 'address', label: '地址', visible: true }
      ],
      showDate: true,
      showName: true,
      showAddress: true
    };
  },
  watch: {
    showDate(val) {
      this.columns[0].visible = val;
    },
    showName(val) {
      this.columns[1].visible = val;
    },
    showAddress(val) {
      this.columns[2].visible = val;
    }
  }
};
</script>

在这个例子中，我们使用 v-for 动态生成列，并通过 columns 数组来管理列的属性。通过 watch 监听 showDate、showName 和 showAddress 的变化，动态更新 columns 数组中对应列的 visible 属性。

2.3 使用 el-table-column 的 show-overflow-tooltip 属性

在某些情况下，我们可能希望在列隐藏时仍然保留列的宽度，以避免表格布局的抖动。ElementUI 提供了 show-overflow-tooltip 属性，可以在列内容溢出时显示 tooltip。

<template>
  <div>
    <el-checkbox v-model="showDate">显示日期</el-checkbox>
    <el-checkbox v-model="showName">显示姓名</el-checkbox>
    <el-checkbox v-model="showAddress">显示地址</el-checkbox>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :show-overflow-tooltip="true"
        v-if="column.visible"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2023-10-01',
          name: '张三',
          address: '北京市朝阳区'
        },
        {
          date: '2023-10-02',
          name: '李四',
          address: '上海市浦东新区'
        }
      ],
      columns: [
        { prop: 'date', label: '日期', width: '180', visible: true },
        { prop: 'name', label: '姓名', width: '180', visible: true },
        { prop: 'address', label: '地址', visible: true }
      ],
      showDate: true,
      showName: true,
      showAddress: true
    };
  },
  watch: {
    showDate(val) {
      this.columns[0].visible = val;
    },
    showName(val) {
      this.columns[1].visible = val;
    },
    showAddress(val) {
      this.columns[2].visible = val;
    }
  }
};
</script>

在这个例子中，我们为每个 el-table-column 添加了 show-overflow-tooltip 属性，以确保在列内容溢出时显示 tooltip。

3. 高级用法

3.1 使用 slot 自定义列内容

在某些情况下，我们可能需要自定义列的内容。ElementUI 提供了 slot 机制，允许我们自定义列的内容。

<template>
  <div>
    <el-checkbox v-model="showDate">显示日期</el-checkbox>
    <el-checkbox v-model="showName">显示姓名</el-checkbox>
    <el-checkbox v-model="showAddress">显示地址</el-checkbox>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        v-if="column.visible"
      >
        <template slot-scope="scope">
          <span v-if="column.prop === 'date'">{{ scope.row.date }}</span>
          <span v-else-if="column.prop === 'name'">{{ scope.row.name }}</span>
          <span v-else>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2023-10-01',
          name: '张三',
          address: '北京市朝阳区'
        },
        {
          date: '2023-10-02',
          name: '李四',
          address: '上海市浦东新区'
        }
      ],
      columns: [
        { prop: 'date', label: '日期', width: '180', visible: true },
        { prop: 'name', label: '姓名', width: '180', visible: true },
        { prop: 'address', label: '地址', visible: true }
      ],
      showDate: true,
      showName: true,
      showAddress: true
    };
  },
  watch: {
    showDate(val) {
      this.columns[0].visible = val;
    },
    showName(val) {
      this.columns[1].visible = val;
    },
    showAddress(val) {
      this.columns[2].visible = val;
    }
  }
};
</script>

在这个例子中，我们使用 slot-scope 自定义了列的内容。通过 scope.row 可以访问到当前行的数据。

3.2 使用 el-table-column 的 formatter 属性

el-table-column 提供了 formatter 属性，可以用于格式化列的内容。

<template>
  <div>
    <el-checkbox v-model="showDate">显示日期</el-checkbox>
    <el-checkbox v-model="showName">显示姓名</el-checkbox>
    <el-checkbox v-model="showAddress">显示地址</el-checkbox>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :formatter="column.formatter"
        v-if="column.visible"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2023-10-01',
          name: '张三',
          address: '北京市朝阳区'
        },
        {
          date: '2023-10-02',
          name: '李四',
          address: '上海市浦东新区'
        }
      ],
      columns: [
        { prop: 'date', label: '日期', width: '180', visible: true },
        { prop: 'name', label: '姓名', width: '180', visible: true },
        { prop: 'address', label: '地址', visible: true, formatter: this.formatAddress }
      ],
      showDate: true,
      showName: true,
      showAddress: true
    };
  },
  methods: {
    formatAddress(row, column, cellValue) {
      return `地址：${cellValue}`;
    }
  },
  watch: {
    showDate(val) {
      this.columns[0].visible = val;
    },
    showName(val) {
      this.columns[1].visible = val;
    },
    showAddress(val) {
      this.columns[2].visible = val;
    }
  }
};
</script>

在这个例子中，我们为地址列添加了 formatter 属性，并通过 formatAddress 方法格式化地址列的内容。

4. 总结

通过本文的介绍，我们了解了如何使用 Vue 和 ElementUI 动态控制表格列的显示和隐藏。无论是使用 v-if、v-for 还是 slot，都可以实现这一功能。在实际开发中，我们可以根据具体需求选择合适的方式来实现列的动态控制。

希望本文对你有所帮助，感谢阅读！