template部分
       只在树形的结构中显示编辑与删除按钮
      这里我只是简单的做了一个 v-if 判断在操作列中 ,判断是否存在级别这个字段
<div>
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column
v-for="(item,index) in tableList"
:key="index"
:label="item.label"
:prop="item.prop"
></el-table-column>
<el-table-column label="操作" width="200">
<template slot-scope="scope">
<el-button
@click="handleClick(scope.row)"
type="primary"
size="mini"
v-if="!scope.row.date"
>编辑</el-button>
<el-button
@click="downloadImg(scope.row)"
type="text"
size="small"
v-if="!scope.row.date"
>删除</el-button>
</template>
</el-table-column>
</el-table>
</div>

data部分   tableList 写成数组对象dom节点不用写那么多(方便维护),里面的数据相当于是标题和 prop 中需要渲染的数据

tableData里面的数据是表格中的数据,如果有children有数据的话就会 出现 element 表格中会出现一个下拉图标

data() {
return {
tableList: [
{
label: "级别",
prop: "date"
},
{
label: "名称",
prop: "name"
},
{
label: "别名",
prop: "alias"
},
{
label: "操作员",
prop: "operator"
},
{
label: "状态",
prop: "state"
}
],
tableData: [
{
id: 1,
date: "个人",
children: [
{
id: 11,
name: "第二根半价套餐",
alias: "是兄弟就来割",
operator: "铁手无情",
state: "无痛"
}
]
},
{
id: 2,
date: "科室",
children: []
}, {
id: 3,
date: "全院",
children: [
{
id: 31,
name: "第二根半价套餐",
alias: "是兄弟就来割",
operator: "铁手无情",
state: "无痛"
},
{
id: 41,
name: "第二根半价套餐",
alias: "是兄弟就来割",
operator: "铁手无情",
state: "无痛"
}
]
}
]
};
},

vue+Element 表格中的树形数据的更多相关文章

  1. Vue&Element开发框架中增加工作流处理,查看申请单中整合多个处理类型的处理

    关于我在Winform框架.混合框架.Bootstrap开发框架中的简易审批性工作流模块,我写过不少文章,有兴趣可以参考<工作流模块>的随笔进行了解,本篇随笔在完成了Vue&Ele ...

  2. Vue&Element开发框架中增加工作流处理,工作流的各个管理页面的界面处理

    我在起前面的几篇随笔中,大概介绍了工作流的一些场景化处理,包括如何把具体业务表单组件化,并在查看和编辑界面中,动态加载组件内容,以及对于查看申请单的主页面,把审批.取消.发起会签.会签.批示分阅.阅办 ...

  3. 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理

    在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...

  4. Vue表格中,对数据进行转换、处理

    众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在 ...

  5. vue+element 表格formatter数据格式化并且插入html标签

    前言 vue中 element框架,其中表格组件,我既要行内数据格式化,又要插入html标签 一贯思维,二者不可兼得也 一.element 表格 数据格式化 demo <el-table-col ...

  6. 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理

    Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...

  7. pandas向表格中循环写入数据

    pandas向表格中循环写入多行数据 import pandas as pd def list_topic(total_num, str1): """ 生成多个主题 :p ...

  8. Excel—使用if(countif())表达式来筛选两个表格中相同的数据

    关注微信公众号:CodingTechWork,一起学习进步. 引言   在线上运维的过程中,遇到一个头疼的事情,有一些合作公司的数据直接从平台上down下来是一个excel,然后发到研发手里去数据库中 ...

  9. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

随机推荐

  1. [题解向] CF#Global Round 1の题解(A $\to$ G)

    这里是总链接\(Link\). \(A\) 题意:求\(\sum_{i=1}^{k} a_i\times b^{k-i}\)的奇偶性, \(k = \Theta(n \log n)\) --其实很容易 ...

  2. yii2自定义验证规则

  3. ES6入门 阮一峰

    ECMAScript 6 入门 http://es6.ruanyifeng.com/#README 在线ES6转ES5 https://es6console.com/k11vgg1r/

  4. fastjson的值过滤器ValueFilter

    https://blog.csdn.net/linyifan_/article/details/83060408 原创林天乐 发布于2018-10-15 16:20:25 阅读数 1462  收藏 展 ...

  5. 我用python爬取了知乎Top沙雕问题排行榜

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 数据森麟 PS:如有需要Python学习资料的小伙伴可以加点击下方 ...

  6. C++ const常量对象、常量成员函数和常引用

    01 常量对象 如果不希望某个对象的值被改变,则定义该对象的时候可以在前面加const关键字 class CTest { public: void SetValue() {} private: int ...

  7. Windows下Django项目搭建流程

    1.创建虚拟环境 virtualenv test 2.进入虚拟环境 source ./项目名/Scripts/activate 3.创建项目 django-admin startproject 项目名 ...

  8. JS基础语法---continue关键字

    continue: 在循环中如果遇到continue关键字,直接开始下一次循环 如下:continue在计数器之前,会一直循环,浏览器会崩溃,我的就崩溃了 var i = 0; while (i &l ...

  9. JavaWeb创建一个公共的servlet

    JavaWeb创建一个公共的servlet,减去繁琐的doget.dopost,好好看好看学. 对于初学者来说,每次前端传数据过来就要新建一个类创建一个doget.dopost方法,其实铁柱兄在大学的 ...

  10. Java 包的使用

    Java 包 Java面向对象的核心的概念:类.接口.抽象类.对象:[主体] 包的定义: 指的是一个程序的目录,在最早的时候,如果要开发一个程序,只需要定义一个Java文件,而后在这个文件中编写所需要 ...