ElementUI使用总结
首先声明,我这总结的官网都有,只是将自己使用时遇到的问题,重新记录一下,官网地址:https://element.eleme.cn/
1、表格内指定行数给定不同样式(类似于隔行变色,也能叫指定行数不同颜色展示),如下图
代码:
<template>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template> <style>
.el-table .warning-row {
background: oldlace;
} .el-table .success-row {
background: #f0f9eb;
}
</style> <script>
export default {
methods: {
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
},
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
}
}
}
</script>
使用时,自己遇到的问题:
问题一:style属性,渲染不上去,无效。最终找到原因,如下图:
问题二:颜色样式渲染上去了,明明设置的连续N行变色,但是只有单行数生效,解决方式如下图:
2、如果想要在表格中设置某一行不显示,想要通过show:true 或者 false来控制可以这么解决,template用处多多,还需要多多学习,如下代码
<!--利用templet标签来实现,标红的v-if地方进行判断 -->
<template v-for="(node, index) in table.cols">
<el-table-column
align="center"
v-if="node.show !== false"
:key="index"
:prop="node.index"
:label="node.label"
:sortable="node.sort === true || node.sort === 'custom'"
>
<template slot-scope="scope">
<span v-if="node.slot == 'deviceType'">{{
scope.row[node.index] == 0 ? "主机" : "备机"
}}</span>
<span v-else-if="node.slot == 'manage_user'">
{{
scope.row.manage_user + "(" + scope.row.manage_user_real + ")"
}}
</span>
<span v-else-if="node.slot == 'manage_user2'">
{{
scope.row.manage_user2 + "(" + scope.row.manage_user2_real + ")"
}}
</span>
<span v-else-if="node.slot == 'same_zone'">{{
scope.row[node.index] == 1 ? "是" : "否"
}}</span>
<span v-if="node.slot == 'type'">{{
getDeviceTypeName(scope.row[node.index])
}}</span>
<span v-else-if="node.slot == undefined">{{
scope.row[node.index]
}}</span>
</template>
</el-table-column>
</template>
data数据如下,标红处的show
data() {
return { table: {
sortOrder: "",
sortColumn: "",
height: 500,
cols: [
{ index: "name", label: "设备名称", sort: true },
{ index: "ip", label: "设备IP", sort: true },
{
index: "type",
label: "设备类型",
editType: "select",
slot: "type",
couponSelected: "",
sort: true,
list: []
},
{
label: "所属机构",
index: "orgname",
editType: "select",
show: false
}
],
page: {
count: 0,
current: 1,
size: 30
},
data: [], //用户信息
filterText: "",
couponSelected: ""
}
};
},
暂时这么多,未完待续...
ElementUI使用总结的更多相关文章
- Element-ui,Mint-ui
style-loader css-loader style!css 饿了么团队开源一个基于vue 组件库 elementUI PC MintUI 移动端 官网: http://element.elem ...
- Vue2.0 + Element-UI + WebAPI实践:简易个人记账系统
最近正在学习Vue2.0相关知识,正好近期饿了么桌面端组件Element-UI发布,便动手做了一款简易个人记账系统,以达到实践及巩固目的. 1.开发环境 Win10 + VS2015 + Sqlser ...
- Vue + element-ui
在Vue-cli生成的项目中使用 element-ui,按照官方的指导 npm i element-ui -D 执行之后,查看package.json,element-ui 加在了 "dev ...
- vue2.0+elementUI构建单页面后台管理平台
git:https://github.com/reg21st/vue2-management-platform 访问:https://reg21st.github.io/vue2-management ...
- Vuejs实例-02Vue.js项目集成ElementUI
Vuejs实例-02Vue.js项目集成ElementUI 0:前言 vue.js的UI组件库,在git上有多个项目,我见的使用者比较多的是iView和Element.两个组件库,组件都很丰富. 官网 ...
- 解决element-ui 中upload组件使用多个时无法绑定对应的元素
问题场景 我们在一个列表中分别都需要有upload组件的时候也就涉及到了多个upload同时存在: 因为一般可以在success回调中拿到上传成功的图片已经成功的response,多个也可以,这个没毛 ...
- 修改ElementUI源码实践
提要 Vue2.0+Vuex+ElementUI是现在很多项目都在使用的BS软件的开发组合. Vue相较于Angular具有学习成本低,上手快以及组件轻量化的特点:相较于React,其官方提供的很多指 ...
- element-ui更换主题色
1.cd到你的项目文件目录下,npm i element-theme -g 2.npm i element-theme-default -D 3.et -i 执行后当前目录会有一个 element-v ...
- Element-ui Theme浅析
一.浅析 1.采用BEM方式管理类名 B:block,模块,一个块是一个独立的实体,块可以包含其它块,名字单词间用-连接:如一个搜索块: E:element,元素,一个元素是块的一部分,具有某种功能, ...
- 基于ElementUI的网站换主题的一些思考与实现
前言 web应用程序,切换主题,给其换肤,是一个比较常见的需求. 如何能快速的切换主题色?(只有固定的一种皮肤) 如果又想把主题色切换为以前的呢?(有多种可切换的皮肤) 该以何种方式编写标签的css属 ...
随机推荐
- SANGFOR AC配置AD域单点登录(一)----AC侧配置
一.需求 1. AD域单点登录适用于客户内网已有AD域统一管理内网用户,部署AC后,希望AC和AD域结合实现平滑认证.即终端PC开机通过域帐号登录AD域后自动通过AC认证上网,无需再次人为通过AC认证 ...
- HarmonyOS三方件开发指南(8)——RoundedImage
[小年答谢,新春送礼]免费抽取1000元京东卡+更多新春好礼~查看详情>>> 目录: 1. RoundedImage组件功能介绍 2. RoundedImage使用方法 3. Rou ...
- dedecms织梦网站栏目增加英文名称的方法
有时候因为网站功能需求,我们需要为织梦程序的栏目添加英文名称,这里有一个栏目添加英文名称的方法,下面站长和大家分享一下.因为客户需要做这样一个需要中英转换的栏目,在网上找了很多方法,但都不适用,终于被 ...
- 零基础如何使用python处理字符串?
摘要:Python的普遍使用场景是自动化测试.爬取网页数据.科学分析之类,这其中都涉及到了对数据的处理,而数据的表现形式很多,今天我们来讲讲字符串的操作. 字符串是作为任意一门编程语言的基础,在P ...
- 搭建tdh平台
1.卸载tdh平台(见tdh集群卸载文件夹) 在manager节点执行chmod +x uninstall.sh (非root用户执行sudo chmod +x uninstall.sh)开始卸载TD ...
- Codeforces Round #693 (Div. 3) G. Moving to the Capital (图,dp)
题意:有一张有向图,每个点的权值为点\(1\)到该点的最短距离(每条边的长度为\(1\)),对于一条路径,这条路径上最多只能有一条边,这条边起点的权值不小于终点,现在要求每个点能到达路径上的点的最小权 ...
- Educational Codeforces Round 9 C. The Smallest String Concatenation(字符串排序)
You're given a list of n strings a1, a2, ..., an. You'd like to concatenate them together in some or ...
- Codeforces Round #594 (Div. 2) C. Ivan the Fool and the Probability Theory (思维,递推)
题意:给你一个\(n\)x\(m\)的矩阵,需要在这些矩阵中涂色,每个格子可以涂成黑色或者白色,一个格子四周最多只能有\(2\)个和它颜色相同的,问最多有多少种涂色方案. 题解:首先我们考虑一维的情况 ...
- Codeforces Round #582 (Div. 3) C. Book Reading
传送门 题意: 给你n,k.表示在[1,n]这个区间内,在这个区间内找出来所有x满足x%k==0,然后让所有x的个位加到一起(即x%10),输出. 例如:输入10 2 那么满足要求的数是2 4 6 8 ...
- SPF POJ - 1523 割点+并查集
题意: 问你这个图中哪个点是割点,如果把这个点去掉会有几个子网 代码: 1 //给你几个点,用着几个点形成了一个图.输入边形成的图,问你这个图中有多少个割点.每一个割点去掉后会形成几个强连通分量 2 ...