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中表示的那一列，模板中的数据显示在那一列中

 <!-- 是否有效 -->
        <template slot="isok" slot-scope="scope">
          <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:lightgreen;"></i>
          <i class="el-icon-error" v-else style="color:red;"></i>
        </template>

slot-scope

作用域插槽实际上是带有数据的插槽，可以获取到父组件传递的参数，将这些参数使用到子组件插槽里

scope相当于一行的数据

scope.row相当于当前行的数据对象

这里就是用插槽 拿到当前行 row是个内置的属性

是带有数据的插槽**，可以获取到父组件传递的参数，将这些参数使用到子组件插槽里

scope相当于一行的数据

scope.row相当于当前行的数据对象

这里就是用插槽 拿到当前行 row是个内置的属性

vue slot的scope传递值是父作用域中的源数据改变，值会同步改变