vue+Element 表格中的树形数据

<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 表格中的树形数据的更多相关文章
- Vue&Element开发框架中增加工作流处理,查看申请单中整合多个处理类型的处理
关于我在Winform框架.混合框架.Bootstrap开发框架中的简易审批性工作流模块,我写过不少文章,有兴趣可以参考<工作流模块>的随笔进行了解,本篇随笔在完成了Vue&Ele ...
- Vue&Element开发框架中增加工作流处理,工作流的各个管理页面的界面处理
我在起前面的几篇随笔中,大概介绍了工作流的一些场景化处理,包括如何把具体业务表单组件化,并在查看和编辑界面中,动态加载组件内容,以及对于查看申请单的主页面,把审批.取消.发起会签.会签.批示分阅.阅办 ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理
在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...
- Vue表格中,对数据进行转换、处理
众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在 ...
- vue+element 表格formatter数据格式化并且插入html标签
前言 vue中 element框架,其中表格组件,我既要行内数据格式化,又要插入html标签 一贯思维,二者不可兼得也 一.element 表格 数据格式化 demo <el-table-col ...
- 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理
Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...
- pandas向表格中循环写入数据
pandas向表格中循环写入多行数据 import pandas as pd def list_topic(total_num, str1): """ 生成多个主题 :p ...
- Excel—使用if(countif())表达式来筛选两个表格中相同的数据
关注微信公众号:CodingTechWork,一起学习进步. 引言 在线上运维的过程中,遇到一个头疼的事情,有一些合作公司的数据直接从平台上down下来是一个excel,然后发到研发手里去数据库中 ...
- vue+element ui中select组件选择失效问题原因与解决方法
codejing 2020-07-10 09:13:31 652 收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...
随机推荐
- Zotero入门精通
一.Zotero简介 Zotero作为一款协助科研工作者收集.管理以及引用研究资源的免费软件,如今已被广泛使用.此篇使用说明主要分享引用研究资源功能,其中研究资源可以包括期刊.书籍等各类文献和网页.图 ...
- 08-Django模板(2)
一.HTML转义 在视图中,通过调用模板传递下文,模板对上下文的传递字符串进行输出时,会对以下字符自动转义.HTML转义的作用:转义后标记代码不会被直接解释执行,而是被直接呈现,防止客户端通过嵌入js ...
- pytest框架之pytest-html报告生成
一.关于安装 pytest-html属于pytest的一个插件,使用它需要先安装 pip install pytest-html pytest可以生成多种样式的结果: 生成JunitXML格式的测试报 ...
- python3报'ascii' codec can't encode characters in position 0-7: ordinal not in range(128)解决方法
运行前指定export PYTHONIOENCODING为utf-8 如 export PYTHONIOENCODING=utf-8; python main.;y
- java核心技术第四篇之JDBC第二篇
01.JDBC连接池_连接池的概念: 1).什么是连接池:对于多用户程序,为每个用户单独创建一个Connection,会使程序降低效率.这时我们可以创建一个"容器", 这个容器中, ...
- Python爬取猪肉价格网并获取Json数据
场景 猪肉价格网站: http://zhujia.zhuwang.cc/ 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获 ...
- shell 练习题1
1.实现每次打开一个xx.sh时,自动添加注释信息 [root@chengyinwu ~]# cat .vimrc set ignorecase set nu set autoindent autoc ...
- JavaScript 正则表达式 初探
JavaScript 正则表达式 正则表达式是构成搜索模式的字符序列 搜索模式可用于文本搜索和文本替换操作 使用正则 字符串方法 在JavaScript中,正则表达式常常用两个字符串方法: searc ...
- 被公司的垃圾XG人事系统吓尿了
OA要尝试设置单点登录,拿现有的HR系统尝试,结果不知道HR系统的加密方式和验证地址,于是乎找HR厂商——厦门XG软件实施人员.结果那个技术人员支支吾吾不肯给我,搞得非常的烦. 真奇怪了,不开源的软件 ...
- 剑指offer 16:反转链表
题目描述 输入一个链表,反转链表后,输出新链表的表头. 解题思路 单链表原地反转是面试手撕代码环节非常经典的一个问题.针对一般单链表,反转的时候需要操作的是当前节点及与之相邻的其他两个节点.因而需要定 ...