1.vue全局组件
Vue.component('组件名',组件实例)
import ZkTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', ZkTable)
import BreadCrumb from '@/components/breadcrumb'
Vue.component('bread-crumb', BreadCrumb)
2.vue-table-with-tree-grid使用及插件参数使用说明
1.安装vue-table-with-tree-grid
npm i vue-table-with-tree-grid -S
2.在main.js中引入
import ZkTable from 'vue-table-with-tree-grid'
3.在main.js中引入
注册全局组件Vue.component('tree-table', ZkTable)
import BreadCrumb from '@/components/breadcrumb'
Vue.component('bread-crumb', BreadCrumb)
<!--
vue-table-with-tree-grid插件参数使用说明:
1.data:指定数据源
2.columns:指定每列配置选项,是数组形式[{},{},{}],其中一个对象是一列
3.selection-type:是否出现复选框,true:代表出现,false:隐藏
4.expand-type:是否出现展开或折叠
5.show-index: 显示序号
6.index-text:显示序号标题文本
7.border:是否加竖线边框
8.show-row-hover:是否鼠标经过时高亮
-->
<tree-table
class="treeTable"
:data="goodsCate"
:columns="columns"
:selection-type="false"
:expand-type="false"
show-index
index-text="#"
border
:show-row-hover="false"
>
<template slot="isOk" slot-scope="scope">
<div>
<i
v-if="!scope.row.cat_deleted"
class="el-icon-success"
style="color: #0f0; font-size: 16px"
></i>
<i v-else class="el-icon-error"></i>
</div>
</template>
<template slot="isSort" slot-scope="scope">
<div>
<el-tag :type="types[scope.row.cat_level]">
{{ (scope.row.cat_level + "") | ranks }}</el-tag
>
</div>
</template>
<template slot="opt" slot-scope="scope">
<div>
<el-button size="mini" type="primary" icon="el-icon-edit"
>编辑</el-button
>
<el-button size="mini" type="danger" icon="el-icon-delete"
>删除</el-button
>
</div>
</template>
</tree-table>
3.Cascader 级联选择器
<!-- props 用来指定配置对象 -->
<el-cascader
expand-trigger="hover"
//指定数据源
:options="parentCateList"
//指定配置项
:props="cascaderProps"
//绑定级别数据
v-model="selectedKeys"
//级联改变后的事件处理函数
@change="parentCateChanged"
clearable
change-on-select
>
</el-cascader>