在vue中想要实现动态展示表格项，可以写一个可扩展的组件
1：主要思路
组件需要接受哪些数据：headerData 表头数据（添加showHeader字段 来控制列是否显示） data 表格数据
扩展性：可以通过添加
共性：若组件多次使用考虑是否有一些共同数据或者方法可以放在一个地方去写
需要考虑的问题
对话框选择 使用show字段来记录列的显示和隐藏 至少一列展示 否则禁用以及提示
computed: { disableSubmit() { //判断templateArr里面的每个show是否都为false return this.templateArr.every(({ show }) => !show); }, },2：具体代码实现
1 <template>
2 <!--可设置表头的table-->
3 <div class="set-header-table">
4 <span
5 class="set-header"
6 @click="openSetHeader"
7 v-if="dId || isLatestRelease"
8 >
9 <i class="ic-a-shezhi" title="设置"></i>
10 </span>
11 <el-table
12 center
13 ref="table"
14 class="kg-list-table"
15 :data="tableData"
16 @row-click="rowClick"
17 @selection-change="selectionChange"
18 :header-cell-style="
19 isLatestRelease
20 ? ''
21 : {
22 background: '#F4F7FA',
23 color: '#303133',
24 fontWeight: '400',
25 }
26 "
27 style="width: 100%"
28 :size="isLatestRelease ? 'mini' : ''"
29 >
30 <el-table-column v-if="check" type="selection" width="55">
31 </el-table-column>
32 <el-table-column
33 type="index"
34 label="序号"
35 width="70"
36 fixed
37 v-if="!isLatestRelease"
38 >
39 </el-table-column>
40 <template v-for="(column, i) of templateArr">
41 <el-table-column
42 :key="i"
43 :prop="column.prop"
44 :label="column.label"
45 :min-width="column.prop === 'title' ? '150px' : ''"
46 :show-overflow-tooltip="column.tooltip"
47 :align="column.align"
48 :header-align="column.headerAlign"
49 v-if="column.showHeader"
50 ><!--:fixed="column.prop==='title' ? 'left': false"-->
51 <template slot="header">
52 <span :title="column.label">{{ column.label }}</span>
53 </template>
54 <template slot-scope="scope">
55 <i
56 class="kg-list-table-icon"
57 v-if="isFileC(scope.row.title) && column.prop === 'title'"
58 :class="fileIconC(scope.row.title)"
59 ></i>
60 <span
61 v-html="scope.row.title"
62 v-if="column.prop === 'title'"
63 ></span>
64 <span
65 v-if="scope.row.isShowNew && column.prop === 'title'"
66 class="new-tag"
67 >NEW</span
68 >
69 <span v-if="column.prop === 'publishDate'">
70 {{ scope.row.publishDate | timeFilter }}
71 </span>
72 <span
73 v-if="column.prop === 'state'"
74 :style="{ color: addClass(scope.row.state) }"
75 >
76 {{ scope.row.state | stateFilter }}
77 </span>
78 <span v-if="column.prop === 'readCount'" style="color: #5677fc">{{
79 scope.row.readCount || 0
80 }}</span>
81 <span v-if="column.prop === 'downloadCount'" style="color: #5677fc">
82 {{ scope.row.downloadCount || 0 }}</span
83 >
84 <span v-if="column.prop === 'label'" style="color: #8c8c8c">
85 <span
86 v-for="(tag, i) in (
87 (scope.row.label && scope.row.label) ||
88 ''
89 ).split('、')"
90 :key="i"
91 class="tag-span"
92 >
93 {{ tag }}<el-divider direction="vertical"></el-divider
94 ></span>
95 </span>
96 <span v-if="column.prop === 'operation'">
97 <i
98 class="el-icon-star-off"
99 v-if="!scope.row.isFavorite"
100 @click.stop="handleCollect(scope.row)"
101 ></i>
102 <i
103 class="el-icon-star-on"
104 v-else="scope.row.isFavorite"
105 @click.stop="handleCollect(scope.row)"
106 ></i>
107 </span>
108 <span v-if="judgeProp(column.prop)">
109 {{ scope.row[column.prop] }}
110 </span>
111 </template>
112 </el-table-column>
113 </template>
114 </el-table>
115 <el-dialog
116 :visible.sync="setHeader.visible"
117 :before-close="setHeader.cancel"
118 class="set-header-dialog"
119 width="380px"
120 >
121 <template slot="title">
122 <div class="el-dialog-header-line"></div>
123 <span class="el-dialog-header-title">编辑表格显示字段</span>
124 </template>
125 <!--<div class="set-header-title">
126 <span>表头字段</span>
127 </div>-->
128 <div class="table-header-list">
129 <div
130 class="table-header-item"
131 v-for="(item, index) of templateArr"
132 :key="index"
133 :class="{ 'table-header-hide': !item.show }"
134 @click="changeShow(item)"
135 >
136 <span>{{ item.label }}</span>
137 <i v-if="item.show" class="ic-a-xianshikejian" title="显示"></i>
138 <i v-else class="ic-yincang" title="隐藏"></i>
139 </div>
140 </div>
141 <div slot="footer">
142 <span v-if="disableSubmit" class="footer-warning">
143 <i class="el-icon-warning"></i>请至少选择一个字段展示
144 </span>
145 <el-button
146 type="primary"
147 size="small"
148 @click="submit"
149 :disabled="disableSubmit"
150 >保存设置
151 </el-button>
152 </div>
153 </el-dialog>
154 </div>
155 </template>
组件展示代码
1 watch: {
2 headerData: {
3 handler(v) {
4 this.templateArr =
5 v.length > 0
6 ? v
7 : [
8 {
9 prop: "title",
10 label: "标题",
11 show: true,
12 showHeader: true,
13 },
14 {
15 prop: "author",
16 label: "作者",
17 show: true,
18 showHeader: true,
19 },
20 {
21 prop: "publishDate",
22 label: "发布日期",
23 show: true,
24 showHeader: true,
25 },
26 {
27 prop: "state",
28 label: "状态",
29 show: true,
30 showHeader: true,
31 },
32 {
33 prop: "readCount",
34 label: "浏览量",
35 show: true,
36 showHeader: true,
37 },
38 {
39 prop: "downloadCount",
40 label: "下载量",
41 show: true,
42 showHeader: true,
43 },
44 ];
45 this.templateArr.forEach((item) => {
46 this.$set(item, "tooltip", true);
47 });
48 },
49 deep: true,
50 immediate: true,
51 },
52 },
53 methods: {
54 // 点击表格的每一行
55 rowClick(row) {
56 let url = this.$router.resolve({
57 path: "/kg/info",
58 query: {
59 id: row.id,
60 },
61 });
62 window.open(url.href, "_blank");
63 },
64 // 打开设置表头弹窗
65 openSetHeader() {
66 this.templateArr.forEach((item) => {
67 item.show = item.showHeader;
68 });
69 this.setHeader.visible = true;
70 },
71 // 保存表头设置
72 submit() {
73 this.templateArr.forEach((item) => {
74 item.showHeader = item.show;
75 });
76 },
77 // 改变表头显示状态
78 changeShow(data) {
79 this.templateArr.forEach((item) => {
80 if (item.prop === data.prop) {
81 item.show = !item.show;
82 }
83 });
84 },
85 judgeProp(prop) {
86 return (
87 prop !== "title" &&
88 prop !== "publishDate" &&
89 prop !== "state" &&
90 prop !== "readCount" &&
91 prop !== "downloadCount" &&
92 prop !== "label" &&
93 prop !== "operation"
94 );
95 },
监听以及一些方法
组件使用
1 <set-header-table 2 @selection-change="selectTableItem" 3 ref="table" 4 :data="abstractList" 5 :headerData="tableHeader" 6 @setHeader="setTableHeader" 7 @open-collect="handleCollect" 8 isLatestRelease //一个扩展字段 9 ></set-header-table>
标签：动态显示,vue,表格,show,showHeader,prop,item,label,true From： https://www.cnblogs.com/tanyy/p/17148959.html