网站加百度商桥,凡科网站是什么做的,全国公共建筑信息平台,网站怎么做切换图片一、功能需求分析
为什么需要这个功能#xff1f;
#xff08;1#xff09;简化信息#xff0c;减少混乱#xff1a;
就像整理抽屉#xff0c;只留下常用的东西#xff0c;这样找起来更快#xff0c;看起来也更整洁。在表格中#xff0c;只展示需要的字段#xff…一、功能需求分析
为什么需要这个功能
1简化信息减少混乱
就像整理抽屉只留下常用的东西这样找起来更快看起来也更整洁。在表格中只展示需要的字段可以让信息更加清晰减少视觉上的混乱。
2提高工作效率
如果每次打开表格都要在一堆不相关的信息中寻找关键数据会浪费很多时间。选择展示所需字段就像是用过滤器筛选出最重要的信息让工作更高效。
3专注关键数据
就像开车时只关注路标和交通信号忽略其他无关的景物。在表格中只展示关键字段可以帮助用户集中注意力做出更准确的决策。
二、实现效果 通过点击显示列在此选择需要显示的字段 显示的效果没有被勾选的列就这样被隐藏啦 三、实现页面代码
templatedivel-button typeprimary clickselectDisplayColumn显示列/el-button!-- 选择需要显示字段卡片 --el-card v-ifdisplayCard classdialog-carddiv slotheaderspan选择需要显示的字段信息/spanel-button stylefloat: right; padding: 3px 0 typetext iconel-icon-close clickdisplayCard false //divel-checkbox v-for(row, index) in tableFields :keyindex v-modelrow.display{{ row.label }}/el-checkbox/el-cardel-table:datatableDatastylewidth: 100%el-table-column v-iftableFields[0].display propdate label日期 width100/el-table-column v-iftableFields[1].display propname label姓名 width100/el-table-column v-iftableFields[2].display propaddress label地址 width220/el-table-column v-iftableFields[3].display propage label年龄 width60/el-table-column v-iftableFields[4].display propemail label邮箱 width220/el-table-column v-iftableFields[5].display propphone label电话 width100/el-table-column v-iftableFields[6].display propcompany label公司 width100/el-table-column v-iftableFields[7].display propcity label城市 width100/el-table-column v-iftableFields[8].display propcountry label国家 width100/el-table-column v-iftableFields[9].display proppostalCode label邮编 width100/el-table-column v-iftableFields[10].display propwebsite label网站 width200//el-table/div
/templatescriptexport 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: 网站,display: true}],tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,age: 28,email: wangxiaohuexample.com,phone: 1234567890,company: 科技有限公司,city: 上海,country: 中国,postalCode: 200333,website: http://example.com},// 添加更多数据项{date: 2016-05-04,name: 李四,address: 上海市普陀区金沙江路 1517 弄,age: 24,email: lisiexample.com,phone: 0987654321,company: 网络科技,city: 北京,country: 中国,postalCode: 100000,website: http://example.com},{date: 2016-05-01,name: 张三,address: 上海市普陀区金沙江路 1519 弄,age: 32,email: zhangsanexample.com,phone: 1122334455,company: 信息技术,city: 广州,country: 中国,postalCode: 510000,website: http://example.com},{date: 2016-05-03,name: 赵六,address: 上海市普陀区金沙江路 1516 弄,age: 29,email: zhaoliuexample.com,phone: 5566778899,company: 电子科技,city: 深圳,country: 中国,postalCode: 518000,website: http://example.com}]}},methods:{selectDisplayColumn(){this.displayCard !this.displayCard;}}}
/scriptstyle
.dialog-card {width: 480px;position: fixed;top: 100px;left: 350px;transform: translate(-50%, -50%);z-index: 1000;
}/style
