vue-table-with-tree-grid的使用
我们平常在使用Element-ui组件库的时候，用的很多组件都能解决日常工作的需要，但是有时候也满足不了，比如属性结构的表格，此时我们就需要自己去找第三方组件来实现这个功能，铁汁们先让我们看看效果图如下：
如何使用这个组件呢
第一步：
npm install vue-table-with-tree-grid
第二步：在main.js引入
import TreeTable from 'vue-table-with-tree-grid'ponent('tree-table', TreeTable) //注册组件
第三步：在template使用如下
<!-- 表格 --><tree-table class="treetable" border :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" :show-index="true" index-text="设置名称"><!-- 是否有效 --><template slot="isok" slot-scope="scope"><i style="font-size: 20px; color:lightgreen" class="el-icon-success" v-if="scope.row.cat_deleted === false"></i><i style="color:lightgray" class="el-icon-error" v-else></i></template><!-- 排序 --><template slot="order" slot-scope="scope"><el-tag v-if="scope.row.cat_level === 0">一级</el-tag><el-tag type="success" v-else-if="scope.row.cat_level ===1">二级</el-tag><el-tag type="warning" v-else>三级</el-tag></template><!-- 操作 --><template slot="opt" slot-scope="scope"><el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.cat_id)">编辑</el-button><el-button type="danger" icon="el-icon-delete" size="mini" @click="DeleteCateById(scope.row.cat_id)">删除</el-button></template></tree-table>
// 商品分类的数据列表，默认为空catelist: [], //这个就是你接口自己去请求得到的数据 //为table定义树的列显示columns:[{label: '分类名称',prop: 'cat_name',},//自定义模板列{label:'是否有效',// 将当前列定义为模板列type: 'template',// 表示当前这一列使用模板的名称template:'isok',},{label: '排序',type: 'template',// 表示当前这一列使用模板的名称template:'order',},{label: '操作',type: 'template',// 表示当前这一列使用模板的名称template:'opt',},]
若是对数据有些不太了解请往下看
