当前位置：首页 > news >正文

可以隐藏列的表格

news 来源：原创 2025/4/28 7:02:59

今天积累一个可以隐藏列的表格的实现方法

需求：

表格中有一部分列可以隐藏，在列名右侧有一个复选框，点击勾选展示，否则隐藏
另有一个小工具栏，其中有每一列对应的复选框，点击可以将隐藏的列再次展示

思路：

维护一个数组columnConfig，存储每一列的列名、能否隐藏等等信息…
再维护一个响应式对象state，存储每一列的显示\隐藏状态
表头和工具栏的复选框双向绑定state状态

这个组件比较简单，代码如下：

<script setup>
import { reactive } from 'vue'/*** 列的信息* @type {{id: {label: string, prop: string, canHidden: boolean}, name: {label: string, prop: string, canHidden: boolean}, region: {label: string, prop: string, canHidden: boolean}, age: {label: string, prop: string, canHidden: boolean}, minzu: {label: string, prop: string, canHidden: boolean}}}*/
const columnConfig = {id: {label: "id号",prop: "id",canHidden: false},name: {label: "姓名",prop: "name",canHidden: false},region: {label: "籍贯",prop: "region",canHidden: true},age: {label: "年龄",prop: "age",canHidden: true},minzu: {label: "民族",prop: "minzu",canHidden: true}
}
// 表中各列的隐藏状态
const state = reactive({})
Object.keys(columnConfig).forEach((key) => {state[key] = true;
})
/*** 表格中的数据* @type {[{id: string, name: string, region: string, age: number, minzu: string},{id: string, name: string, region: string, age: number, minzu: string}]}*/
const data = [{id: '001',name: '张三',region: '湖北',age: 16,minzu: '汉'},{id: '002',name: '李四',region: '湖南',age: 24,minzu: '苗'}
]
</script><template><!-- 再次勾选 --><div class="column-control"><divv-for="item in Object.keys(state)":key="item"class="control-item"><!-- 列标签显示 --><span>{{ columnConfig[item].label }}</span><!-- 列显隐控制 --><el-checkbox:disabled="!columnConfig[item].canHidden"v-model="state[item]"></el-checkbox></div></div><!-- 表格部分（可以勾选隐藏） --><div class="tablecontent"><el-table :data="data" width="100%"><template v-for="item in Object.keys(state)" :key="item"><el-table-columnv-if="state[item]"v-bind="columnConfig[item]"><!-- 自定义表头 --><template #header><div class="header-cell"><!-- 显示列标签 --><span>{{ columnConfig[item].label }}</span><!-- 控制列显隐的复选框 --><el-checkbox:disabled="!columnConfig[item].canHidden"v-model="state[item]"@change="val => state[item] = val"></el-checkbox></div></template></el-table-column></template></el-table></div>
</template><style scoped>
.table-content {width: 1200px;margin: 0 auto;
}
</style>

效果：
在这里插入图片描述