一、功能需求分析

為什么需要這個功能？

（1）簡化信息，減少混亂：

就像整理抽屜，只留下常用的東西，這樣找起來更快，看起來也更整潔。在表格中，只展示需要的字段，可以讓信息更加清晰，減少視覺上的混亂。

（2）提高工作效率：

如果每次打開表格都要在一堆不相關(guān)的信息中尋找關(guān)鍵數(shù)據(jù)，會浪費很多時間。選擇展示所需字段，就像是用過濾器篩選出最重要的信息，讓工作更高效。

（3）專注關(guān)鍵數(shù)據(jù)：

就像開車時只關(guān)注路標(biāo)和交通信號，忽略其他無關(guān)的景物。在表格中，只展示關(guān)鍵字段，可以幫助用戶集中注意力，做出更準(zhǔn)確的決策。

二、實現(xiàn)效果

通過點擊顯示列，在此選擇需要顯示的字段

?顯示的效果：（沒有被勾選的列，就這樣被隱藏啦！）

三、實現(xiàn)頁面代碼

<template><div><el-button type="primary" @click="selectDisplayColumn">顯示列</el-button><!-- 選擇需要顯示字段卡片 --><el-card v-if="displayCard"  class="dialog-card"><div slot="header"><span>選擇需要顯示的字段信息</span><el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-close" @click="displayCard = false" /></div><el-checkbox v-for="(row, index) in tableFields" :key="index"  v-model="row.display">{{ row.label }}</el-checkbox></el-card><el-table:data="tableData"style="width: 100%"><el-table-column v-if="tableFields[0].display" prop="date" label="日期" width="100"/><el-table-column v-if="tableFields[1].display" prop="name" label="姓名" width="100"/><el-table-column v-if="tableFields[2].display" prop="address" label="地址" width="220"/><el-table-column v-if="tableFields[3].display" prop="age" label="年齡" width="60"/><el-table-column v-if="tableFields[4].display" prop="email" label="郵箱" width="220"/><el-table-column v-if="tableFields[5].display" prop="phone" label="電話" width="100"/><el-table-column v-if="tableFields[6].display" prop="company" label="公司" width="100"/><el-table-column v-if="tableFields[7].display" prop="city" label="城市" width="100"/><el-table-column v-if="tableFields[8].display" prop="country" label="國家" width="100"/><el-table-column v-if="tableFields[9].display" prop="postalCode" label="郵編" width="100"/><el-table-column v-if="tableFields[10].display" prop="website" label="網(wǎng)站" width="200"/></el-table></div>
</template><script>export default {data() {return {displayCard:false,tableFields: [{name: 'date',label: '日期',display: true},{name: 'name',label: '姓名',display: true},{name: 'address',label: '地址',display: true},{name: 'age',label: '年齡',display: true},{name: 'email',label: '郵箱',display: true},{name: 'phone',label: '電話',display: true},{name: 'company',label: '公司',display: true},{name: 'city',label: '城市',display: true},{name: 'country',label: '國家',display: true},{name: 'postalCode',label: '郵編',display: true},{name: 'website',label: '網(wǎng)站',display: true}],tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀區(qū)金沙江路 1518 弄',age: 28,email: 'wangxiaohu@example.com',phone: '1234567890',company: '科技有限公司',city: '上海',country: '中國',postalCode: '200333',website: 'http://example.com'},// 添加更多數(shù)據(jù)項{date: '2016-05-04',name: '李四',address: '上海市普陀區(qū)金沙江路 1517 弄',age: 24,email: 'lisi@example.com',phone: '0987654321',company: '網(wǎng)絡(luò)科技',city: '北京',country: '中國',postalCode: '100000',website: 'http://example.com'},{date: '2016-05-01',name: '張三',address: '上海市普陀區(qū)金沙江路 1519 弄',age: 32,email: 'zhangsan@example.com',phone: '1122334455',company: '信息技術(shù)',city: '廣州',country: '中國',postalCode: '510000',website: 'http://example.com'},{date: '2016-05-03',name: '趙六',address: '上海市普陀區(qū)金沙江路 1516 弄',age: 29,email: 'zhaoliu@example.com',phone: '5566778899',company: '電子科技',city: '深圳',country: '中國',postalCode: '518000',website: 'http://example.com'}]}},methods:{selectDisplayColumn(){this.displayCard = !this.displayCard;}}}
</script><style>
.dialog-card {width: 480px;position: fixed;top: 100px;left: 350px;transform: translate(-50%, -50%);z-index: 1000;
}</style>