UI库的 table
好像前端喜欢叫 table，而后端喜欢叫grid。就是现实数据的列表。当然table还有其他的含义，UI库的table也是有其他的功能的。
而数据列表控件其实也没啥好封装的，各种功能UI库都提供了，一般使用也是很方便的，只是为了我的那种想法还是需要小小的封装一下。
功能
- 锁定行列（UI库自带）
- 多选（整理）
- id （设置）
- 字段显示顺序（设置）
- 字段属性（设置）
属性
- 基础属性
props: { controlId: { // 101 gridID，必填 type: Number, required: true }, height: { // table的高度 type: Number, default: 300 }, colOrder: { // 字段显示的顺序 type: Array, default: () => [] }, fixedIndex: { // 锁定的列数 type: Number, default: 0 }, idName: { // 主键字段的名称 type: String, default: 'id' }, 'data-selection-ids': Array, // 选择的记录的ID集合 'data-list': { // 绑定的数据 type: Array, default: () => [] } ... }
-
colOrder
table组件会遍历这个数组，取出来id，然后到 itemMeta 里面取出来字段的具体属性，绑定到 el-table-column ，这样可以方便调整字段的显示的先后顺序。 -
height
设置高度才可以实现锁定行列的功能 -
fixedIndex
锁定多少列，从左面开始数。 -
idName
主键字段的名称，默认是id。看官网例子，没有提到id，选择记录的时候，返回的是整条记录，这个倒是方便，需要哪个就取哪个。
只是一般大多都是需要一个ID，比如做批量删除的时候，要提交给后端选择的id集合。
所以这里可以直接返回选择的id集合。
-
data-selection-ids
这个就是用户选择的记录的id集合，可以使用v-model的形式绑定，不过好像名称有点长，是不是应该弄个简单点的名称，比如dataIds？ -
data-list
要显示的数据集合，数组形式。
设置高度、锁定行列等信息，还需要设置主键字段的名称，这样便于获取选择的记录的ID。
- 字段属性
label: '公司名称', prop: 'companyName', width: 120, align: 'left/center/right', 'header-align': 'center'
这几个是依据 element-plus 的 table 的 el-table-column 的需求来设置的。设置表头、绑定的字段名称和宽度。然后还应该加上对齐方式、格式化等功能。找了半天终于找到了 align，还有 formatter。
0001基本的列表.png
目前这个控件只想实现这几个功能，一般的列表需求大概可以满足了。
其他功能会封装成其他的控件，比如批量修改控件、n级分类控件等。
然后就可以做综合性的增删改查了。
调用方式
const gridItemMeta = { 101: { id: 101, label: '编号', prop: 'id ', width: 120 }, 102: { id: 102, label: '公司名称', prop: 'companyName', width: 120 }, 103: { id: 103, label: '建立日期', prop: 'date', width: 120 }, 104: { id: 104, label: '联系人', prop: 'name', width: 120 }, ... } const girdMeta = reactive({ controlId: 1001, height: 250, // 高度 colOrder: [101, 102, 103, 104, 105, 106, 107, 108], // 显示顺序 fixedIndex: 0, // 锁定的列数 itemMeta: gridItemMeta })
还是老规矩，属性都可以做成json的形式，可以放在单独的 json 文件里面单独加载，这样增删改查需要的几个控件的属性就都弄到了json文件里面，然后呢，猜猜可以实现什么神奇的功能呢？
本文转自 https://www.jianshu.com/p/381f2bc4d769，如有侵权，请联系删除。