vue-table-with-tree-grid
vue-table-with-tree-grid
结合黑马后台事件的vue项目中的商品管理下的商品分类模块介绍vue-table-with-tree-grid
使用过程：
1.先在vue ui可视化的工具中安装在运行依赖(vue-table-with-tree-grid),也可以使用官方提供的
Use npm:
cnpm i vue-table-with-tree-grid -S
Or use yarn:
yarn add vue-table-with-tree-grid
(本人使用可视化工具失效，所以使用的是cnpm运行)
2.在main.js中引入这个依赖插件，引入后需要注册，实例如下
import Vue from 'vue'
import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)
这样在子组件中使用的时候，直接把放到模板中即可
3.该项目用到的属性
| 属性 | 说明 | 类型 | 参数 | 默认值 |
|---|---|---|---|---|
| data | 表格各行的数据 | array数组 | [] | |
| columns | 表格各列的配置（具体见下文：Columns Configs | array数组 | [] | |
| selection-type | 是否为多选类型表格(前面是否带对选的框) | Boolean | - | false |
| expand-type | 是否为展开行类型表格（为 True 时，需要添加名称为 ‘$expand’ 的作用域插槽, 它可以获取到 row, rowIndex)(展开行类就是用 > 的一个点击展开和关闭的) | Boolean | - | false |
| show-index | 是否显示数据索引(显示在第一列中，从1开始往后排) | Boolean | - | false |
| index-text | 数据索引的名称(对应第一行的标题)(不需要v-bind) | String | - | ‘序号’ |
| border | 是否显示纵向边框 | Boolean | - | false |
| show-row-hover | 鼠标悬停时，是否高亮当前行 | Boolean | - | true |
Columns Configs配置在data中，与上述的colums对应
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| label | 列标题名称(自定义的，显示在表格中的标题) | String | ‘’ |
| prop | 对应列内容的属性名(是表格中的内容，对应axios中的数据) | String | ‘’ |
4.在配置columns的时候，
一个lable代表是每一列的第一个值，
prop中的是传递过来的axios的接收过来的值
type: ‘template’,：代表将这一列定义为一个模板
template：是表示这个模板的名称是什么
columns: [
{
label: '分类名称',
prop: 'cat_name'
}, {
label: '是否有效',
// 表示把当前列定义为模板列
type: 'template',
// 表示当前这一列使用模板的名称
template: 'isok'
}, {
label: '排列',
// 表示把当前列定义为模板列
type: 'template',
// 表示当前这一列使用模板的名称
template: 'order'
}, {
label: '操作',
// 表示把当前列定义为模板列
type: 'template',
// 表示当前这一列使用模板的名称
template: 'opt'
}
],
solt-的属性值表示这个模板对应columns中表示的那一列，模板中的数据显示在那一列中
slot-scope
作用域插槽实际上是带有数据的插槽，可以获取到父组件传递的参数，将这些参数使用到子组件插槽里
scope相当于一行的数据
scope.row相当于当前行的数据对象
这里就是用插槽 拿到当前行 row是个内置的属性
是带有数据的插槽**，可以获取到父组件传递的参数，将这些参数使用到子组件插槽里
scope相当于一行的数据
scope.row相当于当前行的数据对象
这里就是用插槽 拿到当前行 row是个内置的属性
vue slot的scope传递值是父作用域中的源数据改变，值会同步改变