tablePage是一个可以帮助快速开发后台管理系统表格的组件
首先先来看看怎么使用
tablePage的使用非常简单高效，只要把tablePage组件和tablePageJs引入，对tablepage进行组件注册，然后混入tablePageJs。
import TablePage from "../../TablePage/TablePage.vue"; import TablePageJs from "../../TablePage/TablePage.js"; components: { TablePage }, mixins: [TablePageJs], 复制代码 :data="tableListData" :filter="filter" @tableSelectionChange="tableSelectionChange" @search="search" @resetSearch="resetSearch" @sizeChange="sizeChange" @currentChange="currentChange" @sortChange="sortChange" ref="table" id="taskTable" @setTableKeys="setTableKeys" @selectAll="tableSelectAllStatus" :searchForm="searchForm" />``` ```tableListData: { selection: true, columnFunctionsWidth: 120, tableData: [ { deviceUid: 1, deviceName: "deviceName", commandId: 2, }, ], tableKeys: [ { id: "deviceUid", label: "设备UID", width: "200", allways: true, }, ], tableFunctions: [ { label: "按钮", method: (scope) => { alert("按钮"); }, disabled: (scope) => { return true; }, }, }, ], }, ``` 主要的一些props data:主要是传入表格的一些功能和数据的控制 tableListData中: selection控制表格前面的选择按钮 columnFunctionsWidth控制列宽 tableData控制展示的数据，将后端获取到的数据放入 tableKeys表格对应字段的值 id为字段名 label为表头名 tableFunctions表格操作栏 filter:主要是控制表格的模糊查询以及分页查询 tableSelectionChange:存储选中项数组 search:根据filter中的条件进行查询 resetSearch:将filter中的条件置为初始定义的值并且重新发送请求 sizeChange:改变fitler中的pageSize并且pageNum置为1并且重新发送请求 currentChange:改变fitler中的pageNum并且重新发送请求 sortChange:根据filter中sortOrder排序条件重新发送请求 setTableKeys:表头改变时，记录用户操作 selectAll:选中所有数据 以上的自定义事件在tablePageJs中定义了 searchForm中: formDesc:用于描述表单输入的字段 type:输入框类型 如 input select ... label:输入框的label attrs:元素上的属性 TablePage.js做了什么 1 data中定义 ``` data () { return { multiData: [], tableSelectAll: false, filter: { pageSize: 10, // 每页条数 pageNum: 1, // 当前页 rowTotal: null, // 总条数 sortName: '', sortOrder: '', pageSizes: [10, 20, 50, 100] }, cacheInit: false } }, 复制代码multiData:选中的数据 tableSelectAll:是否全选 filtert:condiction是模糊的条件，其他字段为分页查询条件 cacheInit:是否是第一次缓存
2 watch中定义
async handler (val, oldval) { // 限制只获取一次缓存 if (this.cacheInit) { return } }, immediate: true, deep: true } 复制代码监听tbaleListData中的tableKeys，如果已经不是第一次了就直接return
3 methods中定义，大部分都是使用组件的时候监听的事件 tableSelectionChange:存储选中项数组 search:根据filter中的条件进行查询 resetSearch:将filter中的条件置为初始定义的值并且重新发送请求 sizeChange:改变fitler中的pageSize并且pageNum置为1并且重新发送请求 currentChange:改变fitler中的pageNum并且重新发送请求 sortChange:根据filter中sortOrder排序条件重新发送请求 setTableKeys:表头改变时，记录用户操作 selectAll:选中所有数据
接下来就看看tablePage组件中的代码 我觉得比较重要的一些 搜索栏模块 让用户自定义传入搜索模块 额外的搜索控制栏 让用户自定义传入额外的搜索控制栏 控制栏 主要是选中 全选 等方法
列表模块 使用el-table然后再data中绑定tableData 1 使用data中selection属性判断是否要表格前面的选择框 2 循环tableKeys数组实现数据列 3 中也提供了插槽name为column_${item.id},判断tableKeys数组对象中是否又formatter,如果有调用formatter传入scope.row,无则直接rowValue函数，可以为表格中空的字段做一些处理 4 tableFunctions对操作列进行显示控制,如果tableFunctions.length大于4给他更多的按钮并隐藏大于4的其他操作,对于操作就是循环tableFunctions数组click时触发对象中的method方法并且渲染对象的label
最后底部模块就是一个分页器通过pagination来控制显示隐藏，同时使用了传入的filter对象中的属性进行控制
tablePage中script的实现 props模块
props: { // 布局显示隐藏 layout: { type: Array, default: layoutList, }, // 表格数据 data: { type: Object, require: true, }, // 页码和数据条数 filter: { type: Object, }, // 表格名称 pageName: { type: String, }, // 表格ID，用于记录表格操作的唯一标识 id: { type: String, default: "tablepage", }, // 表格自定义样式 customClass: { type: String, default: "", }, // 是否显示加载中 loading: { type: Boolean, default: false, }, // 表格高度 height: { type: String, }, }, 复制代码data中的数据
data() { return { tableKeys: [], // 表格列是否显示 tableData: [], // 表格数据 tableIndex: null, // 表格自定义排序 multiData: [], // 多选数据 selectAll: false, // 是否全选 maxHeight: 1000, // 表格最大高度，不超过页面高度 }; }, 复制代码watch中的实现 selectAll data.tableData data.tableKeys对着三个变量进行watch
作者：用户7866379816645
链接：https://juejin.cn/post/7169850931192807431