第一步 先下载包
npm i vue-table-with-tree-grid -S
或
cnpm i vue-table-with-tree-grid -S
第二步 全局引用
在main.js文件中引入
import treeTable(名字自己起) from 'vue-table-with-tree-grid'
// 注册全局组件 上下的名字要对应
//Vue.component('treeTable'(这里也是自己起,这里起的名字是调用组件时使用的), treeTable(自己起的名字))
Vue.component('treeTable', treeTable)
第三步 调用
/*分类表格
:data(设置数据源)
:columns(设置表格中列配置信息)
:selection-type(是否有复选框)
:expand-type(是否展开数据)
show-index(是否设置索引列)
index-text(设置索引列头)
border(是否添加纵向边框)
:show-row-hover(是否鼠标悬停高亮)
*/
<tree-table
:data="cateList"
:columns="columns"
:selection-type="false"
:expand-type="false"
show-index
index-text="#"
border
:show-row-hover="false"
>
<!-- 是否有效 -->
<template slot="isok" slot-scope="scope">
<i
v-if="scope.row.cat_deleted == false"
class="el-icon-success cGreen"
></i>
<i v-else class="el-icon-error cRed"></i>
</template>
<!-- 排序 -->
<template slot="order" slot-scope="scope">
<el-tag v-if="scope.row.cat_level == 0" type="warning">一级</el-tag>
<el-tag v-else-if="scope.row.cat_level == 1" type="info"
>二级</el-tag
>
<el-tag v-else type="primary">三级</el-tag>
</template>
<!-- 操作 -->
<template slot="opt" slot-scope="scope">
<div class="optbox">
<el-button type="primary" size="mini" class="el-icon-edit"
>编辑</el-button
>
<el-button type="danger" size="mini" class="el-icon-delete" @click="delCate(scope.row.cat_id)"
>删除</el-button
>
</div>
</template>
</tree-table>
第四步 在data中配置配置项
/*
columns:[
label: 表格标题
]
*/
export default {
data(){
return{
cateList: [],// 这里是数据源 我是将接口的数据传进来的
columns: [ // tree-table 配置项
{ label: '分类名称', prop: 'cat_name' },
// type:'template'(将该列设置为模板列),template:'isok'(设置该列模板的名称为isok)
{ label: '是否有效', prop: '', type: 'template', template: 'isok' },
{ label: '排序', prop: '', type: 'template', template: 'order' },
{ label: '操作', prop: '', type: 'template', template: 'opt' }
]
}
}
}
运行截图
由于是第一次使用,在使用中还是有很多不清楚的地方...