vue3+element

2024-07-02 18:42| 来源: 网络整理| 查看: 265

先看下面这个框框

经过使用发现其实BUG很多,如不能传递#default,不能使用多级表头等故,本人进行了改版,文章地址: 动态列

工作接了个需求，需要实现表格的动态列，但是后端又不参与，全权交给前端，百度搜了一下，大多都是el-table-column的for循环，我觉得用起来不爽，还得改变el-table-column的书写方式，用对象保存列的相关信息，所以搞了一个这玩应

效果就是不改变书写习惯而且还能达到前端控制列的显示与隐藏

话不多讲，上代码

哦，不对，先上效果在这里插入图片描述动态图没做过，见谅吧

项目结构

简介：

ColumnControl为列的控制器ProjectTable为二次封装的el-table表格store中用于存放列的信息以及显示信息Home是使用上述三个东西的页面在这里插入图片描述

ColumnControl组件内容

多说一句，由于我的项目使用了自动引入，所以你复制完之后可能有的方法并没有引入，如ref，computed等属于vue，useStore属于vuex，需要自行引入具体这些个东西都是干什么的见注释吧

import { Grid } from '@element-plus/icons-vue' import { showColumn, allColumn } from '@/store/getters' import { CheckboxValueType } from 'element-plus' const store = useStore() // #region 全选 const checkAll = ref(true) // 选中与半选的状态控制, 条件就是当前选中的数据个数大于0 且小于所有列的总数 const isIndeterminate = computed(() => { return checkList.value.length > 0 && checkList.value.length { if (boolean) { // 全选 checkList.value = allColumn.value.map(item => item.value) }else { // 全不选 checkList.value = [] } } // #endregion 全选 // #region 多选框 // 当前选中的个数用了可写的computed属性 const checkList = computed({ get: () => showColumn.value, // showColumn是存在store中的属性 set: (val: string[]) => { store.dispatch('setShowColumn', val) } }) // #endregion 多选框全选 {{ item.label }} .column-popover { max-height: 330px; overflow-y: auto; .el-divider--horizontal { margin: 10px 0; } } .column-checkgroup { &-item { display: flex; } } ProjectTable组件内容 import { showColumn } from '@/store/getters' import { RendererElement } from 'vue' import { IColumn } from '@/store/modules/table' // #region ts接口 interface IPage { currentPage: number pageSize: number total: number } interface Props { data: any[] height?: string | number pagination?: IPage hiddenCheckbox?: boolean hiddenIndex?: boolean } interface Emits { (e: 'selection-change', value: any[]): void } // #endregion ts接口 withDefaults(defineProps(), { data: () => [], // 表格数据 height: '100%', // 表格高度 hiddenCheckbox: false, // 隐藏表格多选框? hiddenIndex: false, // 隐藏表格序号? pagination: () => ({ // 翻页,看项目需求,如果翻到第二页需要从11开始,那么就需要这个 currentPage: 1, pageSize: 10, total: 0 }) }) const emits = defineEmits() const store = useStore() onMounted(() => { initSlotList() // 关键, 初始化插槽 }) // #region 插槽 const slots = useSlots() const slotList = ref([]) const initSlotList = () => { if (slots.default) { // el-table-column 使用时不传name 所以属于默认插槽 slotList.value = slots.default() || [] // 语法 initDynamicColumn() // 初始化动态列 } } // 初始化动态列 const initDynamicColumn = () => { const checkboxList: IColumn[] = [] // 所有列 slotList.value.map(item => { const props = item.props // 存在prop属性 label为表头名称 if (props && typeof props === 'object' && props.prop) { checkboxList.push({ value: props.prop, label: props.label }) } }) store.dispatch('setAllColumn', checkboxList) } // #endregion 插槽 // 表格多选事件 const selectionChange = (list: any[]) => { emits('selection-change', list) } {{ $index + (pagination.currentPage - 1) * pagination.pageSize + 1 }} store仓库

别问为什么用vuex 不用pinia 问就是不会

index.ts文件 import table from './modules/table' const store = createStore({ modules: { table } }) export default store getters.ts文件 import { IColumn } from './modules/table' import store from './index' // vue3 组合api 没法使用mapGetters 弄了个这玩应凑合用 export const allColumn = computed(() => { return store.getters.allColumn }) export const showColumn = computed(() => { return store.getters.showColumn }) table.ts文件 import { Module } from 'vuex' // #region ts接口 export interface IColumn { value: string label: string } interface IState { allColumn: IColumn[] showColumn: string[] } // #endregion ts接口 // Module S表示咱们这个页面(table.ts)中的state类型 // R: 由于咱们是模块, 在外面的store使用 store.modules = {table} 挂载的咱们 // 而外面的store也会有 state 属性, 这个R就是外面state属性的类型 // 由于我的store/index.ts没写state,所以这里给个any const table: Module = { state() { return { allColumn: [], // 表格全部的列格式 IColumn showColumn: [] // 当前展示的列 } }, getters: { allColumn(state) { return state.allColumn }, showColumn(state) { return state.showColumn } }, mutations: { SET_ALL_COLUMN(state, data) { state.allColumn = data }, SET_SHOW_COLUMN(state, data) { state.showColumn = data } }, // 使用时用actions进行数据更改, 尽量不要使用mutations, 没原因, 建议而已 actions: { setAllColumn({ commit }, data: IColumn[]) { commit('SET_ALL_COLUMN', data) // 设置全部列时默认展示所有的列 const showColumn = data.map(item => item.value) commit('SET_SHOW_COLUMN', showColumn) }, setShowColumn({ commit }, data: string[]) { commit('SET_SHOW_COLUMN', data) } } } export default table Home页面 // #region ts接口 interface ITableRow { name: string, age: number, random: number } interface IPage { currentPage: number pageSize: number total: number } // #endregion ts接口 onMounted(() => { getList() }) // #region 表格 // 分页数据, 本例由于动态表格封装所以弄了一个 const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 }) const tableData = ref([]) // 获取列表 const getList = () => { const list: ITableRow[] = [] for (let i = 0; i 没用,占位 .home { width: 700px; display: flex; flex-direction: column; &-buttons { margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; } } 总结

这玩应在使用时除了引用ColumnControl和ProjectTable两个组件以外，与你普通书写el-table是一样的，你也不用重新弄个数组保存所有的列，实现这东西的时候是真的难受，用的时候是爽的不要不要的注意！！！！！！我写的这个玩应只是一个最最基本的，没有缓存功能，也没跟用户挂钩，甚至你都不需要关浏览器或者重新登陆，你只要切换一个页面再切回来，这时你刚刚隐藏的列就又会被显示出来，当然要解决这些问题也是完全可以的，不过现在是周五下午五点了，我要下班了，伟大的扩展任务就交给你们了！

【本文地址】

公司简介

联系我们