elementUI tag标签和表格样式设置
2020-04-27 19:30
1146 查看
1、在vue表格中使用
<template slot-scope="scope"> <template v-if="column.prop==='status'"> <el-tag :type="formatTagType(scope.row.status)">{{ statusArr.labelByValue[scope.row.siteStatus] }}</el-tag> </template> </template>
2.dict.js 文件中
import { dictGetLabelByValue, dictGetValueByLabel } from '@/api/dictDetail' let that export default { data() { return { dictStatus: [], // 字典转换相关数据 statusArr: { valueByLabel: '', labelByValue: '' } } }, created() { // 所有字典 this.getNeedDicts() }, beforeCreate() { // 全局this that = this }, filters: { // 时间过滤器 filterTime: function(time) { if (!time) { return '' } const date = new Date(time) const dateNumFun = num => (num < 10 ? `0${num}` : num) const [Y, M, D, h, m, s] = [ // es6 解构赋值 date.getFullYear(), dateNumFun(date.getMonth() + 1), dateNumFun(date.getDate()), dateNumFun(date.getHours()), dateNumFun(date.getMinutes()), dateNumFun(date.getSeconds()) ] return `${Y}-${M}-${D} ${h}:${m}:${s}` }, // 状态过滤器 filterApprovalStatus: function(value) { const label = that.statusArr.labelByValue[value] if (typeof label !== 'string') { return '' } return label } }, methods: { //tag标签获取类型 formatTagType(state) { if (state === 0) return 'info' else if (state === 1 || state === 3) return 'success' else if (state === 2 || state === 4) return 'danger' else return 'success' }, async getNeedDicts() { const _this = this // 拿到状态字典 dictGetValueByLabel('status').then(function(result) { _this.statusArr.valueByLabel = result }) dictGetLabelByValue('status').then(function(result) { _this.statusArr.labelByValue = result }) } } }
3、表格表头样式和斑马纹样式设置
在表头添加如下代码
<el-table v-loading="loading" id="drag-table" ref="table" :data="data" :height="height" :header-cell-style="tableHeaderColor" :row-class-name="tableRowClassName" resizable border style="width: 100%" @row-click="clickRow" @row-dblclick="edit" @selection-change = "selectData">
js代码如下
// 斑马纹表格样式 tableRowClassName({ row, rowIndex }) { let color = '' if (rowIndex % 2 === 0) { //class名 设置相应样式 color = 'success-row' } else { color = 'warning-row' } if (row.isShow) { color = 'table-row' } //选择行样式 for (let i = 0; i < this.multipleSelection.length; i++) { if (row === this.multipleSelection[i]) { color = 'select-row' } } return color }, // 更改表头样式 tableHeaderColor({ row, column, rowIndex, columnIndex }) { if (rowIndex === 0) { return 'background-color: #373F52;color: white;font-weight: 700;' } },
xx_ll_ 原创文章 16获赞 0访问量 671 关注 私信
相关文章推荐
- vue2.0+Element-ui应用【Table表格 不同的数据匹配不同的Tag标签】
- 使用elementUI的时候,使用Upload 上传的时候,使用 list-type 属性来设置文件列表的样式,before-upload方法失效
- element-ui中的表格el-table滚动条样式修改
- struts2标签样式:struts.ui.theme 另转struts2中constant设置
- ElementUI Tag组件实现多标签生成的方法示例
- 利用vue和element-ui设置表格内容分页的实例
- element-ui表格的表头使用类似下拉框样式
- Element-ui为Table表格头部设置背景颜色(高亮)
- element-ui 表格样式修改
- element-ui 更改表格中某个单元格的样式
- 关于element-ui 中 table 表头以及行内数据样式设置
- Element UI的表格table列的宽度自适应设置
- vue + ElementUI 表格筛选框的高度设置,超出一定高度,显示滚动条
- vue + ElementUI 表格筛选框的高度设置,超出一定高度,显示滚动条
- 利用vue和element-ui设置表格内容分页
- jsp通过tld标签输出内容 报错Mandatory TLD element [jsp-version] missing or empty in TLD [/WEB-INF/hellotag...
- phpexcel中文教程-设置表格字体颜色背景样式、数据
- Element UI 中可展开表格手风琴效果实现(toggleRowExpansion方法的正确使用方式)
- Excel设置表格样式的显示效果使用excel如何改变表格样式
- 【Element-ui】每个类只有一个默认设置选项