vue3 + antd Table组件排序filters、筛选sorter、自定义表头展示_vue3 antd项目实战——table表格的自定义筛选

作者：小惠珠哦 | 2024-07-29 04:04:03

踩

vue3 antd项目实战——table表格的自定义筛选

1、需求：可以自定义设置表格表头展示哪些内容，如默认展示（图一），点击表格最后一列表格的图标弹出表头的全部字段（图二），经过设置之后（图三）

图一：
在这里插入图片描述
图二：

图三：

在这里插入图片描述

2、具体实现（因为还没确认表头默认展示和全部展示的数据是否是后台返回，所以自己写了静态数据）

父组件：
html
<a-table
  :columns="state.columns"
  :row-key="(record) => record.id"
  :data-source="state.dataSource"
  :pagination="pagination"
  :loading="loading"
  @change="handleTableChange"
>
  <template #pt="{ text }">
    {{ formatTime(text) }}
  </template>
  <template #message="text">
    <span class="redColor">
      <span
        >{{ text && text.text ? text.text.substr(0, 4) : "" }}&nbsp;
      </span>
      <span
        >{{ text && text.text ? text.text.substr(4, 2) : "" }}&nbsp;
      </span>
      <span
        >{{ text && text.text ? text.text.substr(6, 10) : "" }}&nbsp;
      </span>
      <span
        >{{ text && text.text ? text.text.substr(16, 4) : "" }}&nbsp;
      </span>
      <span
        >{{ text && text.text ? text.text.substr(20, 2) : "" }}&nbsp;
      </span>
      <span
        >{{ text && text.text ? text.text.substr(22, 4) : "" }}&nbsp;
      </span>
      <span
        >{{ text && text.text ? text.text.substr(26, 2) : "" }}&nbsp;
      </span>
    </span>
    <span class="greenColor">
      <span
        >{{ text && text.text ? text.text.slice(28, -6) : "" }}&nbsp;
      </span>
    </span>
    <span class="blueColor">
      <span
        >{{ text && text.text ? text.text.slice(-6, -4) : "" }}&nbsp;
      </span>
    </span>
    <span class="yellowColor">
      <span>{{
        text && text.text
          ? text.text.substr(text.text.length - 4)
          : ""
      }}</span>
    </span>
  </template>
  <template #type="{ text }">
    {{
      text.indexOf("_") == -1
        ? sfReportLabel[text]
        : state.reportLabel[text]
    }}
  </template>
  <template #setTableTitle>
    <a-tooltip>
      <template #title>设置</template>
      <span @click="handleTableHead" class="table-head-btn"><SettingOutlined /></span>
    </a-tooltip>
  </template>
  <template #action="{ text }">
    <a-tooltip>
      <template #title>操作</template>
      <a-popover title="" trigger="click">
        <template #content>
          <div class="action-box" style="display: flex; flex-direction: column;">
            <a-popconfirm
              title="Are you sure change this task?"
              ok-text="Yes"
              cancel-text="No"
            >
              <a @click="handleEdit(text)">修改</a>
            </a-popconfirm>
            <!-- <a @click="handleEdit(text)">修改</a> -->
            <a>删除</a>
          </div>
        </template>
        <MenuOutlined />
      </a-popover>
    </a-tooltip>
  </template>
</a-table>
<a-modal
  class="table-head-modal"
  :visible="tableHeadPop"
  title="列表视图设置"
  :confirmLoading="tableHeadLoading"
  :width="750"
  @cancel="handleCancel"
>
  <table-head-content
    ref="tableHeadRef"
    :columns="state.setColumns"
  ></table-head-content>
  <template #footer>
    <div class="pop-btn-box">
      <div class="btn-left">
        <a-button @click="checkAll">全选</a-button>
        <a-button  @click="checkNoAll">全不选</a-button>
      </div>
      <div class="btn-right">
        <a-button @click="handleCancel">返回</a-button>
        <a-button  type="primary" @click="handleOk" class="search-btn">确定</a-button>
      </div>
    </div>
  </template>
</a-modal>
js:
<script setup>
import tableHeadContent from "./components//tableHeadContent.vue";
import { onMounted, reactive, ref, toRaw, getCurrentInstance, computed, nextTick } from "vue";
import moment from "moment";
import {
  UpOutlined,
  SearchOutlined,
  SyncOutlined,
  DownOutlined,
  SettingOutlined,
  MenuOutlined
} from "@ant-design/icons-vue";
import {
  getReportTypeList,
  getBeforeDate,
  getQuery,
  formatTime,
} from "./index";
import { request } from "../../../utils/request";
import { Form } from "ant-design-vue";
import { useStore } from 'vuex';
const store = useStore();
const useForm = Form.useForm;
const globalProperties =
  getCurrentInstance().appContext.config.globalProperties; // 获取全局挂载
const http = globalProperties.$http;
const sfReportLabel = {
  30: "测试报",
  32: "遥测站定时报",
  33: "遥测站加报报",
  34: "遥测站小时报",
  35: "遥测站人工置数报",
  36: "遥测站图片报",
  37: "中心站查询遥测站实时数据",
  38: "中心站查询遥测站历史数据",
  40: "中心站修改遥测站基本配置表",
  42: "中心站修改遥测站运行参数配置表",
  49: "修改密码",
  4: "设置遥测站时钟",
};
const formData = reactive({
  devId: "",
  region: undefined,
  time: [],
  type: undefined,
  typeId: undefined,
  deviceTypeId: undefined,
});
const state = reactive({
  siteTypeList: [],
  regionList: [],
  reportTypeList: [],
  deviceTypeList: [],
  reportLabel: {},
  dataSource: [],
  selectedDate: undefined,
  columns: [ // 默认显示
    {
      title: "测站编码",
      dataIndex: "stationCode",
      ellipsis: true,
    },
    {
      title: "测站名称",
      ellipsis: true,
      dataIndex: "stationName",
    },
    {
      title: "设备编码",
      ellipsis: true,
      dataIndex: "devId",
    },
    {
      title: "上报时间",
      dataIndex: "pt",
      ellipsis: true,
      slots: {
        customRender: "pt",
      },
      sorter: (a, b) => {
        return moment(a.pt).valueOf() - moment(b.pt).valueOf()
      },
    },
    {
      title: "原始报文",
      dataIndex: "message",
      width: 340,
      slots: {
        customRender: "message",
      },
    },
    {
      title: "上报类型",
      dataIndex: "type",
      ellipsis: true,
      slots: {
        customRender: "type",
      },
      // filters: [], // 需要筛选时添加
      filterMultiple: false, // 不可多选
      // onFilter: (value, record) => record.type.includes(value)
    },
  ],
  setColumns: [], // 用于传给子组件
});
const determine = ref(false);
const isAll = ref(false);
const loading = ref(false);
const timer = ref(null);
const tableHeadPop = ref(false);
const tableHeadLoading = ref(false);
const tableHeadRef = ref(null);
const pagination = reactive({
  current: 1,
  pageSize: 10,
  pageSizeOptions: ["10", "20", "30", "40", "50"],
  showSizeChanger: true, // 显示切换页码
  showTotal: () => {
    return `总共${pagination.total}条数据`
  },
  total: 0,
});
state.siteTypeList = computed(()=>store.state.siteTypeList);
state.regionList = computed(()=>store.state.regionList);
state.deviceTypeList = computed(()=>store.state.deviceTypeList);
// 切换页
const handleTableChange = (page, filters, sorter) => {
  pagination.current = page.current;
  pagination.pageSize = page?.pageSize;
  // console.log(filters); // 选中值为数组（单选直接拿第一项，多选把数组转化成字符串拼接 - 看后台需要什么数据结构）
  if(filters.type) {
    // 必须判断，未操作切换页会报错（无type属性）
    formData.type = filters.type[0];
  }
  getTableData(getQuery(formData));
  // console.log(sorter); // 等后台参数
};
// 获取表格数据
const getTableData = (formData) => {
  loading.value = true;
  // 判断最后一项是否已有设置列(因为顺序会打乱，保持设置在最后一列)
  if(state.columns.length && (state.columns[state.columns.length -1].key != "setItem")) {
    state.columns.push({
      key: "setItem", // 不可使用dataIndex, 会导致操作拿不到当前行的数据
      width: 60,
      slots: {
        title: "setTableTitle",
        customRender: "action",
      },
    })
  }
  request(http.GET_DEVICE_ORG_MSG_LIST, "get", {
    pageNum: pagination.current,
    pageSize: pagination.pageSize,
    ...formData,
  })
    .then((res) => {
      loading.value = false;
      state.dataSource = res.rows;
      pagination.current = res.currentPage;
      pagination.total = res.total;
    })
    .catch(() => {
      loading.value = false;
    });
};
// 点击动态设置表头
const handleTableHead = () => {
  tableHeadPop.value = true;
  nextTick(() => {
    tableHeadRef.value.setValues();
  });
  state.setColumns = state.columns;
  let num = state.setColumns.length - 1;
  state.setColumns = toRaw(state.setColumns).slice(0, num); // 把设置那行去掉
};
// 全选
const checkAll = () => {
  nextTick(() => {
    tableHeadRef.value.checkAllSon();
  })
};
// 全不选
const checkNoAll = () => {
  nextTick(() => {
    tableHeadRef.value.checkNoAllSon();
  })
};
const handleOk = async() => {
  let arr = await tableHeadRef.value.getValues();
  if(arr.length) {
    tableHeadPop.value = false;
    state.columns = arr;
    getTableFilters(); // 筛选列数据获取
    pagination.current = 1;
    getTableData(getQuery(formData));
  }
};
const handleCancel = () => {
  tableHeadPop.value = false;
};
// 限制日期选中（前后6天，即一周）
const disabledDate = (current) => {
  toRaw(state.selectedDate)
  if (determine.value == true) {
    return (
      current < moment(state.selectedDate).add(-6, "d") ||
      current > moment(state.selectedDate).add(+6, "d")
    );
  } else {
    return;
  }
};
// 日期面板变化
const calendarChange = (moment) => {
  if (moment.length == 1) {
    determine.value = true;
    state.selectedDate = moment[0];
  } else {
    state.selectedDate = undefined;
    determine.value = false;
  }
};
// 查询
const handleSearch = () => {
  pagination.current = 1;
  getTableData(getQuery(formData));
};
const rulesRef = ref({});
const { resetFields } = useForm(formData, rulesRef);
// 重置
const resetSearch = () => {
  resetFields();
  formData.time = [moment(getBeforeDate(7)), moment(getBeforeDate(0))];
  formData.region = toRaw(state.regionList)[0].dictLabel;
};
// 初始化下拉数据
const initSel = async () => {
  formData.region = (state.regionList)[0].dictLabel; // 默认选中区域
  formData.time = [moment(getBeforeDate(7)), moment(getBeforeDate(0))]; // 默认选中时间
  let reportRes = await getReportTypeList(http);
  state.reportTypeList = reportRes;
  getTableFilters();
};
// 获取上报类型的filters
const getTableFilters = () => {
  let filters = [];
  if (state.reportTypeList && state.reportTypeList.length) {
    state.reportTypeList.forEach((i) => {
      state.reportLabel[i.dictCode] = i.dictLabel;
      let obj = {
        text: "",
        value: ""
      }
      state.columns.forEach((ins, index) => {
        if(ins.dataIndex == "type") { // 指定是上报类型
          obj.text = i.dictLabel;
          obj.value = i.dictCode;
          filters.push(obj);
          state.columns[index].filters = filters;
          // state.columns[index].filters.push(obj);
        }
      })
    });
  }
}
// 操作列模拟修改
const handleEdit = (text) => {
  console.log(text);
};
onMounted(async () => {
  await initSel();
  getTableData(getQuery(formData));
  timer.value = setInterval(() => { // 定时触发
    getTableData(getQuery(formData));
  }, 300000);
});
</script>
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
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394

子组件：
<template>
  <div class="table-head-content">
    <a-checkbox-group
      v-model:value="state.checkedList"
      name="checkboxgroup"
      @change="onChange"
    >
      <ul class="check-ul">
        <li v-for="(item, index) in state.columnsAll" :key="index" class="check-li" :class="{'isChecked': item.checked}">
          <a-checkbox :value="item.dataIndex" @change="getCheckOne">
            <span class="commonCode checkCode">{{ item.title }}</span>
          </a-checkbox>
        </li>
      </ul>
    </a-checkbox-group>
  </div>
</template>
<script setup>
import { reactive, toRaw, getCurrentInstance } from "vue";
import { getJsonArrEqual } from "../index";
const globalProperties = getCurrentInstance().appContext.config.globalProperties; // 获取全局挂载
const toast = globalProperties.$toast;
const props = defineProps({
  columns: Array,
});
const state = reactive({
  checkedList: [],
  columnsAll: [
    {
      title: "测站编码",
      dataIndex: "stationCode",
      ellipsis: true,
    },
    {
      title: "测站名称",
      ellipsis: true,
      dataIndex: "stationName",
    },
    {
      title: "设备编码",
      ellipsis: true,
      dataIndex: "devId",
    },
    {
      title: "上报时间",
      dataIndex: "pt",
      ellipsis: true,
      slots: {
        customRender: "pt",
      },
      sorter: (a, b) => {
        return moment(a.pt).valueOf() - moment(b.pt).valueOf()
      },
    },
    {
      title: "原始报文",
      dataIndex: "message",
      width: 340,
      slots: {
        customRender: "message",
      },
    },
    {
      title: "上报类型",
      dataIndex: "type",
      ellipsis: true,
      slots: {
        customRender: "type",
      },
      // filters: [], // 需要筛选时添加
      filterMultiple: false, // 不可多选
      // onFilter: (value, record) => record.type.includes(value)
    },
    {
      title: "上报类型编码",
      dataIndex: "functionCode",
      ellipsis: true,
    },
  ]
});
// 初始化
const setValues = () => {
  state.checkedList = [];
  let newArr = getJsonArrEqual(toRaw(props.columns), state.columnsAll); // 获取相同项
  state.columnsAll.forEach(i => { // 初始化checked属性
    i.checked = false;
  })
  state.columnsAll.forEach(item => {
    newArr.map(i => {
      if(item.dataIndex == i.dataIndex) {
        item.checked = true; // 初始化选中的checked值
        state.checkedList.push(i.dataIndex);
      }
    })
  });
};
// 选中
const onChange = (check) => {
  state.checkedList = check;
};
// 单个选中
const getCheckOne = (e) => {
  state.columnsAll.forEach((item, index) => {
    if(item.dataIndex == e.target.value) {
      state.columnsAll[index].checked = e.target.checked; // 根据选中与否赋值
    }
  })
}; 
// 获取选中
const getValues = () => {
  return new Promise((resolve, reject) => {
    if(state.checkedList.length >= 3) { // 必须选择三项或者三项以上
      let arr = [];
      state.checkedList.forEach(item => {
        state.columnsAll.map(i => {
          if(i.dataIndex == item) {
            arr.push(i);
          }
        })
      })
      resolve(arr);
    } else {
      toast('必须选中三项或者三项以上喔！')
      reject([]);
    }
  })
};
// 全选
const checkAllSon = () => {
  if(state.columnsAll.length) {
    state.checkedList = []; // 防止叠加
    state.columnsAll.map(i => {
      state.checkedList.push(i.dataIndex);
      return i.checked = true;
    })
  }
};
// 全不选
const checkNoAllSon = () => {
  state.checkedList = [];
  state.columnsAll.map(i => {
    return i.checked = false;
  })
};
defineExpose({
  setValues,
  getValues,
  checkAllSon,
  checkNoAllSon
})
</script>
<style lang="less" scoped>
.table-head-content {
  .check-ul {
    display: flex;
    flex-wrap: wrap;
    .check-li {
      padding: 2px 8px;
      border-radius: 4px;
      margin-right: .1rem;
      margin-bottom: .1rem;
      white-space: nowrap;
      ::v-deep(.ant-checkbox-wrapper) {
        width: 200px;
      }
      &:hover {
        background: @table-head-set-bg;
      }
    }
    .isChecked {
      background: @table-head-set-bg;
    }
  }
};
</style>
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

3、json数组获取相同项方法：

// 获取两个JSON数组的相同项
export const getJsonArrEqual = (arr1, arr2) => {
  var newArr = [], kvIndex = {};
  for (var i = 0; i < arr1.length; i++) {
    for (var j = 0; j < arr2.length; j++) {
      if (arr1[i].dataIndex == arr2[j].dataIndex) {
        var item
        if (kvIndex[arr1[i].dataIndex] == undefined) {
          kvIndex[arr1[i].dataIndex] = newArr.length;
          item = {};
          for (var attr in arr1[i]) item[attr] = arr1[i][attr];
          newArr[kvIndex[arr1[i].dataIndex]] = item;
        } else {
          item = newArr[kvIndex[arr1[i].dataIndex]];
          for (var attr in arr2[j]) item[attr] = arr2[j][attr];
        }
      }
    }
  }
  return newArr
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

4、后面遇到一个问题，就是 columns中不一定每个项都有dataIndex(会导致数据重叠)，所以改为使用title去做唯一性

export const getJsonArrEqual = (arr1, arr2) => {
  var newArr = [], kvIndex = {};
  for (var i = 0; i < arr1.length; i++) {
    for (var j = 0; j < arr2.length; j++) {
      if (arr1[i].title == arr2[j].title) {
        var item
        if (kvIndex[arr1[i].title] == undefined) {
          kvIndex[arr1[i].title] = newArr.length;
          item = {};
          for (var attr in arr1[i]) item[attr] = arr1[i][attr];
          newArr[kvIndex[arr1[i].title]] = item;
        } else {
          item = newArr[kvIndex[arr1[i].title]];
          for (var attr in arr2[j]) item[attr] = arr2[j][attr];
        }
      }
    }
  }
  return newArr
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

5、注意：在子组件使用到dataIndex去判断的地方也要全部改为title喔

阳光温柔，生机盎然，喜欢春天的一切。

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/小惠珠哦/article/detail/897058