vue-shop 表格中使用树形控件 vue-table-width-tree-grid

1. npm

npm i vue-table-with-tree-grid -S

2.main.js中注册

import TreeTable from 'vue-table-with-tree-grid' //表格 树形组件Vue.component('tree-table', TreeTable) //自定义注册tree-table 标签组件

3.使用

      <!-- 树形组件 --><tree-table:data="cateData"  //数据:columns="columns":selection-type="false"  //是否开启多选框:expand-type="false"  // 是否展开当前行:show-index="true" //自动排序序号:show-row-hover="false"  //鼠标经过颜色style="margin-top: 15px"border ></tree-table>

这个树形结构有点像iview

 data() {return {cateData: [],columns: [{label: "分类名称",prop: "cat_name",},],};

一级大家电下面的数据都是接口返回给我们的这个样式是组件自身的

如何插入图标？

编辑删除操作或者显示按钮图标之类都可以套用以下方法

1. 创建template模版

 columns: [{label: "分类名称",prop: "cat_name",},{label: "是否有效",type: "template",   //将当前列定义为模版列 template:"isok"   //表示当前这一列使用模版名称},],

2.定义

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

接口里当前行的这个字段如果为fasle 显示success图标否则显示error

vue-shop 表格中使用树形控件 vue-table-width-tree-grid相关推荐

element-ui中el-tree树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)...
在element-ui的el-tree树形控件中默认获取选取当前选中id的方法是this.$refs.tree.getCheckedKeys(); 但是如果子节点不是全部选中的话,父节点算不选中. 由 ...
element组件中el-tree树形控件的使用
我们在用element进行项目开发的时候,有时会要用到el-tree树形控件(比如我们对权限进行分配的时候),下面介绍关于el-tree常用的属性和方法基础的树形控件结构 <el-tree : ...
jeecg中的树形控件demo
1.comboTree控件 1.页面方法: <t:comboTree url="jeecgFormDemoController.do?getComboTreeData" va ...
layui在table表格中添加时间控件
timeB为name layui.table.render({elem: '#lay-purchasing-change',id: "layTableId1" ,url: base ...
vue如何获取tree当前选中的节点_vue中element-ui 树形控件-树节点的选择(选中当前节点,获取当前id并且获取其父级id)...
出处: Element-ui官网给的方法 getCheckedKeys() { console.log(this.$refs.tree.getCheckedKeys()); }, 1 这种只有在所有子 ...
vue+element-ui之tree树形控件有关子节点和父节点之间的各种选中关系详解
做后端管理系统,永远是最蛋疼.最复杂也最欠揍的事情,也永远是前端开发人员最苦逼.最无奈也最尿性的时刻.蛋疼的是需求变幻无穷,如同二师兄的三十六般变化:复杂的是开发难度寸步难行,如同蜀道难,难于上青天: ...
qtextedit 默认文案_QT中常用的控件说明.md
2主窗口类型有三种窗口 QMainWindow QWiget QDialog QMainWindow:可以包含菜单栏,工具栏和标题栏,是最常见的窗口显示形式. QDialog:是对话窗口的基类.没 ...
vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48 来源:亿速云阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级 ...

vue-shop 表格中使用树形控件 vue-table-width-tree-grid

如何插入图标？

vue-shop 表格中使用树形控件 vue-table-width-tree-grid相关推荐

最新文章

热门文章