iView表格列筛选的组件封装

发表于 | 分类于 | | 阅读次数:
字数统计: 1.8k 字 | 阅读时长 ≈ 9 分钟

当表格列过多时，可设置筛选选择要展示的列

tableColumnFilter.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<template>
  <div>
    <Button type="primary" @click="showFilterPanelFlag = !showFilterPanelFlag">
      <span class="icon_filter"></span>
    </Button>
    <transition>
      <div v-show="showFilterPanelFlag" class="filter-panel">
        <CheckboxGroup v-model="selected" @on-change="checkAllGroupChange">
          <div v-for="item in filterFiled" :key="item">
            <Checkbox :label="item" style="margin: 2px 5px"></Checkbox>
          </div>
        </CheckboxGroup>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: "tableColumnFilter",
    props: {
      filterFiled: {
        type: Array,
        default: function () {
          return ['标题', '年度', '版本', '创建人', '创建时间', '使用状态']
        }
      },
      defaultCheck: {
        type: Array
      }
    },
    data() {
      return {
        showFilterPanelFlag: false,
        //已选中的数据
        selected: [...this.defaultCheck],
      }
    },
    methods: {
      checkAllGroupChange() {
        this.$emit('filter-field-change', this.selected);
      }
    }
  }
</script>

<style scoped lang="less">
  .filter-panel {
    width: 166px;
    min-height: 120px;
    height: 500px;
    position: absolute;
    background-color: white;
    z-index: 9999;
    margin-left: -113px;
    overflow-y: scroll;
  }

  .icon_filter {
    display: inline-block;
    width: 14px;
    height: 14px;
    position: relative;
    top: 5px;
    background: url("filter.png") no-repeat center center;
  }

</style>

example.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<template>
  <div>
    <Row type="flex" justify="space-between" align="middle">
      <Col>
        <div class="alertTips">
          <Alert>
            可筛选要展示的列
          </Alert>
        </div>
      </Col>
      <Col>
        <tableColumnFilter
          :filterFiled="[
                 '学期',
                 '年级',
                 '学院',
                 '专业',
                 '课程名称',
                 '课程代码',
                 '教学班名称',
                 '实际班级人数',
                 '是否录入成绩',
                 '是否排课',
                 '是否选课',
                 '成绩录入人',
                 '连排节数',
                 '周学时',
                 '学时',
                 '学分',
                 '成绩分制',
                 '老师端展示形式',
                 '学生端展现形式',
                 '学生选课比例',
                 '是否需要校验地点冲突',
                 '是否需要校验教师冲突',
                 '是否需要校验学生冲突',
                 '答疑学时',
                 '授课教师',
                 '上课周次',
                ]"
          :defaultCheck="[
                 '学期',
                 '年级',
                 '学院',
                 '专业',
                 '课程名称',
                 '课程代码',
                 '教学班名称',
                 '实际班级人数'
              ]"
          @filter-field-change="refreshTable">
        </tableColumnFilter>
      </Col>
    </Row>

    <div>
      <Table :data="tableData" :columns="tableColumns" border></Table>
    </div>
  </div>
</template>
<script>
  import tableColumnFilter from './tableColumnFilter'

  export default {
    name: 'taskManager',
    data() {
      let index = {
        title: ' ',
        type: 'index',
        width: 60,
        align: 'center'
      };
      let term = {
        title: '学期',
        key: 'term',
        align: 'center',
        customOrder: 2
      };
      let grade = {
        title: '年级',
        key: 'grade',
        align: 'center',
        customOrder: 3
      };
      let departmentName = {
        title: '学院',
        key: 'departmentName',
        align: 'center',
        customOrder: 4
      };
      let major = {
        title: '专业',
        key: 'major',
        align: 'center',
        customOrder: 5
      };
      let courseName = {
        title: '课程名称',
        key: 'courseName',
        align: 'center',
        customOrder: 6
      };
      let courseCode = {
        title: '课程代码',
        key: 'courseCode',
        align: 'center',
        customOrder: 7
      };
      let className = {
        title: '教学班名称',
        key: 'className',
        align: 'center',
        customOrder: 8
      };
      let classCount = {
        title: '实际班级人数',
        key: 'classCount',
        align: 'center',
        customOrder: 9,
        render: (h, params) => {
          return h('a', {}, params.row.classCount)
        }
      };
      const hasScore = {
        title: '是否录入成绩',
        key: 'hasScore',
        align: 'center',
        customOrder: 10
      };
      let hasSchedule = {
        title: '是否排课',
        key: 'hasSchedule',
        align: 'center',
        customOrder: 11
      };
      let hasChoose = {
        title: '是否选课',
        key: 'hasChoose',
        align: 'center',
        customOrder: 12
      };
      let scorePerson = {
        title: '成绩录入人',
        key: 'scorePerson',
        align: 'center',
        customOrder: 13
      };
      let sequentNum = {

        title: '连排节数',
        key: 'sequentNum',
        align: 'center',
        customOrder: 14
      };
      let weekTime = {
        title: '周学时',
        key: 'weekTime',
        align: 'center',
        customOrder: 15
      };
      let time = {
        title: '学时',
        key: 'time',
        align: 'center',
        customOrder: 16
      };
      let credit = {
        title: '学分',
        key: 'credit',
        align: 'center',
        customOrder: 17
      };
      let scoreFormat = {
        title: '成绩分制',
        key: 'scoreFormat',
        align: 'center',
        customOrder: 18
      };
      let displayTeacher = {
        title: '老师端展示形式',
        key: 'displayTeacher',
        align: 'center',
        customOrder: 19
      };
      let displayStudent = {
        title: '学生端展现形式',
        key: 'displayStudent',
        align: 'center',
        customOrder: 20
      };
      let percent = {
        title: '学生选课比例',
        key: 'percent',
        align: 'center',
        customOrder: 21
      };
      let conflictPlace = {
        title: '是否需要校验地点冲突',
        key: 'conflictPlace',
        align: 'center',
        customOrder: 22
      };
      let conflictTeacher = {
        title: '是否需要校验教师冲突',
        key: 'conflictTeacher',
        align: 'center',
        customOrder: 23
      };
      let conflictStudent = {
        title: '是否需要校验学生冲突',
        key: 'conflictStudent',
        align: 'center',
        customOrder: 24
      };
      let questionTime = {
        title: '答疑学时',
        key: 'questionTime',
        align: 'center',
        customOrder: 25
      };
      let teacher = {
        title: '授课教师',
        key: 'teacher',
        align: 'center',
        customOrder: 26
      };
      let week = {
        title: '上课周次',
        key: 'week',
        align: 'center',
        customOrder: 27
      };
      let action = {
        title: '操作',
        key: 'action',
        width: 160,
        align: 'center',
        render: (h, params) => {
          let readView = h('a', {
            on: {
              click: () => {
                console.log(12);
              }
            }
          }, '管理学生名单');
          return h('div', {}, [readView]);
        },
      };
      return {
        tableColumns: [
          index, term, grade, departmentName, major, courseName, courseCode, className, classCount, action
        ],
        tableData: [
          {
            term: '第一学期',
            grade: '2018级',
            departmentName: '食品学院',
            major: '食品加工技术',
            courseName: '大学生心里健康',
            courseCode: '98903782',
            className: '2018级体育-食品营养与健康1班',
            classCount: '100',
            hasScore: '是',
            hasSchedule: '是',
            hasChoose: '是',
            scorePerson: 'zhang',
            sequentNum: '2',
            weekTime: '2',
            time: '2',
            credit: '2',
            scoreFormat: '百分',
            displayTeacher: '百分',
            displayStudent: '百分',
            percent: '100%',
            conflictPlace: '是',
            conflictTeacher: '是',
            conflictStudent: '是',
            questionTime: '2',
            teacher: '2',
            week: '2',
          }
        ],
        //固定的两个列
        index,
        action,
        //用于匹配
        labelInfo: {
          学期: 'term',
          年级: 'grade',
          学院: 'departmentName',
          专业: 'major',
          课程名称: 'courseName',
          课程代码: 'courseCode',
          教学班名称: 'className',
          实际班级人数: 'classCount',
          是否录入成绩: 'hasScore',
          是否排课: 'hasSchedule',
          是否选课: 'hasChoose',
          成绩录入人: 'scorePerson',
          连排节数: 'sequentNum',
          周学时: 'weekTime',
          学时: 'time',
          学分: 'credit',
          成绩分制: 'scoreFormat',
          老师端展示形式: 'displayTeacher',
          学生端展现形式: 'displayStudent',
          学生选课比例: 'percent',
          是否需要校验地点冲突: 'conflictPlace',
          是否需要校验教师冲突: 'conflictTeacher',
          是否需要校验学生冲突: 'conflictStudent',
          答疑学时: 'questionTime',
          授课教师: 'teacher',
          上课周次: 'week',
        },
        //所有列
        tableFieldInfo: {
          term: term,
          grade: grade,
          departmentName: departmentName,
          major: major,
          courseName: courseName,
          courseCode: courseCode,
          className: className,
          classCount: classCount,
          hasScore: hasScore,
          hasSchedule: hasSchedule,
          hasChoose: hasChoose,
          scorePerson: scorePerson,
          sequentNum: sequentNum,
          weekTime: weekTime,
          time: time,
          credit: credit,
          scoreFormat: scoreFormat,
          displayTeacher: displayTeacher,
          displayStudent: displayStudent,
          percent: percent,
          conflictPlace: conflictPlace,
          conflictTeacher: conflictTeacher,
          conflictStudent: conflictStudent,
          questionTime: questionTime,
          teacher: teacher,
          week: week,
        }
      }
    },
    methods: {
      //过滤字段，刷新表格显示内容
      refreshTable(selectedField) {
        let showField = [];
        for (let item of selectedField) {
          let fieldName = this.labelInfo[item];
          showField.push(this.tableFieldInfo[fieldName])
        }
        if (showField.length) {
          showField.sort((a, b) => {
            return a.customOrder > b.customOrder
          })
        }
        //序号和操作固定
        this.tableColumns = [this.index, ...showField, this.action];
      },

    },
    components: {
      tableColumnFilter,
    }
  }
</script>
<style scoped>

</style>