element ui 表格隐藏显示列+列排序功能
时间: 2023-06-28 12:11:10 浏览: 68
Element UI 表格组件提供了 `column` 属性来设置表格的列信息,可以通过该属性来隐藏/显示列和排序列。
首先,设置表格的列信息,例如:
```html
<el-table :data="tableData" :column="columns"></el-table>
```
其中,`columns` 是一个数组,包含了每一列的配置信息,例如:
```js
columns: [
{
label: '姓名',
prop: 'name',
sortable: true,
show: true
},
{
label: '年龄',
prop: 'age',
sortable: true,
show: true
},
{
label: '性别',
prop: 'gender',
sortable: false,
show: true
}
]
```
上面的配置中,每一列都有一个 `show` 属性,用于表示该列是否显示。初始情况下,所有列都是显示的。
接下来,我们可以通过一个复选框列表来控制列的显示/隐藏,例如:
```html
<el-checkbox-group v-model="showColumns">
<el-checkbox label="name">姓名</el-checkbox>
<el-checkbox label="age">年龄</el-checkbox>
<el-checkbox label="gender">性别</el-checkbox>
</el-checkbox-group>
```
其中,`showColumns` 是一个数组,包含了所有可选列的标识符。当某个复选框被选中时,将对应列的 `show` 属性设置为 `true`,否则设置为 `false`,例如:
```js
watch: {
showColumns: function(val) {
this.columns.forEach(column => {
column.show = val.indexOf(column.prop) !== -1
})
}
}
```
最后,我们可以通过 `sortable` 属性来设置是否允许用户对表格进行排序。当 `sortable` 为 `true` 时,用户可以点击表头来对该列进行升序/降序排序,例如:
```js
columns: [
{
label: '姓名',
prop: 'name',
sortable: true,
show: true
},
// ...
]
```
这样,我们就实现了表格的隐藏显示列和列排序功能。完整的代码示例如下:
```html
<template>
<div>
<el-checkbox-group v-model="showColumns">
<el-checkbox label="name">姓名</el-checkbox>
<el-checkbox label="age">年龄</el-checkbox>
<el-checkbox label="gender">性别</el-checkbox>
</el-checkbox-group>
<el-table :data="tableData" :column="columns"></el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' }
],
columns: [
{
label: '姓名',
prop: 'name',
sortable: true,
show: true
},
{
label: '年龄',
prop: 'age',
sortable: true,
show: true
},
{
label: '性别',
prop: 'gender',
sortable: false,
show: true
}
],
showColumns: ['name', 'age', 'gender']
}
},
watch: {
showColumns: function(val) {
this.columns.forEach(column => {
column.show = val.indexOf(column.prop) !== -1
})
}
}
}
</script>
```