UI库的 table
好像前端喜欢叫 table，而后端喜欢叫grid。就是现实数据的列表。当然table还有其他的含义，UI库的table也是有其他的功能的。
而数据列表控件其实也没啥好封装的，各种功能UI库都提供了，一般使用也是很方便的，只是为了我的那种想法还是需要小小的封装一下。
功能
- 锁定行列（UI库自带）
- 多选（整理）
- id （设置）
- 字段显示顺序（设置）
- 字段属性（设置）
属性
- 基础属性
1 props: { 2 controlId: { // 101 gridID，必填 3 type: Number, 4 required: true 5 }, 6 height: { // table的高度 7 type: Number, 8 default: 300 9 }, 10 colOrder: { // 字段显示的顺序 11 type: Array, 12 default: () => [] 13 }, 14 fixedIndex: { // 锁定的列数 15 type: Number, 16 default: 0 17 }, 18 idName: { // 主键字段的名称 19 type: String, 20 default: 'id' 21 }, 22 'data-selection-ids': Array, // 选择的记录的ID集合 23 'data-list': { // 绑定的数据 24 type: Array, 25 default: () => [] 26 } 27 ... 28}
-
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。
- 字段属性
1 label: '公司名称', 2 prop: 'companyName', 3 width: 120, 4 align: 'left/center/right', 5 'header-align': 'center'
这几个是依据 element-plus 的 table 的 el-table-column 的需求来设置的。设置表头、绑定的字段名称和宽度。然后还应该加上对齐方式、格式化等功能。找了半天终于找到了 align，还有 formatter。
0001基本的列表.png
目前这个控件只想实现这几个功能，一般的列表需求大概可以满足了。
其他功能会封装成其他的控件，比如批量修改控件、n级分类控件等。
然后就可以做综合性的增删改查了。
调用方式
1const gridItemMeta = { 2 101: { 3 id: 101, 4 label: '编号', 5 prop: 'id ', 6 width: 120 7 }, 8 102: { 9 id: 102, 10 label: '公司名称', 11 prop: 'companyName', 12 width: 120 13 }, 14 103: { 15 id: 103, 16 label: '建立日期', 17 prop: 'date', 18 width: 120 19 }, 20 104: { 21 id: 104, 22 label: '联系人', 23 prop: 'name', 24 width: 120 25 }, 26 ... 27} 28 29const girdMeta = reactive({ 30 controlId: 1001, 31 height: 250, // 高度 32 colOrder: [101, 102, 103, 104, 105, 106, 107, 108], // 显示顺序 33 fixedIndex: 0, // 锁定的列数 34 itemMeta: gridItemMeta 35})
还是老规矩，属性都可以做成json的形式，可以放在单独的 json 文件里面单独加载，这样增删改查需要的几个控件的属性就都弄到了json文件里面，然后呢，猜猜可以实现什么神奇的功能呢？
本文转自 https://www.jianshu.com/p/381f2bc4d769，如有侵权，请联系删除。