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 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
暂无评论内容