您的位置:首页 > Web前端 > CSS

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 关注 私信
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: