效果图
组件template中:
<el-table-column :label="$t('epmlang.epmInfo.sPMStatus')" class-name="status-col" width="100">
<template slot-scope="scope">
<el-tag :type="scope.row.sPMStatus | statusFilter">
{{ scope.row.sPMStatus }}
</el-tag>
</template>
</el-table-column>
js
filters: {
// el-tag类型转换
statusFilter(status) {
const statusMap = {
PM: 'info',
IDEL: 'danger',
BUYOFF: 'success'
}
console.log(statusMap[status])
return statusMap[status]
}
},
button demo
filters 使用
![](https://img-blog.csdnimg.cn/img_convert/dafcb91ad3fda062d8f76c599e2a14ee.png)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- vue -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- element引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- element引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--Axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="App">
<el-button type="primary" @click.prevent.stop="but1">
button
</el-button>
<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
<el-table-column label="日期" align="center" >
<template slot-scope="{row}">{{ row.date }} </template>
</el-table-column>
<!-- <el-table-column label="姓名" align="center" >
<template slot-scope="{row}">{{ row.name }} </template>
</el-table-column> -->
<el-table-column label="姓名" align="center" >
<template slot-scope="{row}" >
<!--row.name 传进来 ,走过滤的逻辑 -->
<el-button :type="row.name | statusFilter" circle> </el-button>
</template>
</el-table-column>
<el-table-column label="姓名" align="center" >
<template slot-scope="{row}" >
<!--row.name 传进来 ,走过滤的逻辑 -->
<el-button :type="row.a | statusFilter" circle> </el-button>
</template>
</el-table-column>
<el-table-column label="姓名" align="center" >
<template slot-scope="{row}" >
<!--row.name 传进来 ,走过滤的逻辑 -->
<el-button :type="row.b | statusFilter" circle> </el-button>
</template>
</el-table-column>
<el-table-column label="地址" align="center" >
<template slot-scope="{row}">{{ row.address }} </template>
</el-table-column>
</div>
</body>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
.el-button:hover {
background: #126c9e !important;
color: white !important;
font-weight: bold;
border-color: #01a8f9 !important;
}
}
</style>
<script>
var vm = new Vue({
el: "#App",
filters: {
// button type 过滤
statusFilter(status) {
const statusMap = {
王: 'warning',
小: '',
虎: 'success',
的: 'danger'
}
return statusMap[status]
}
},
data: {
flag: '有',
visible: false,
tableData: [{
date: '2016-05-02',
name: '王',
a: '虎',
b: '王',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-04',
name: '小',
a: '王',
b: '小',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '虎',
a: '的',
b: '王',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-03',
name: '的',
a: '小',
b: '王',
address: '上海市普陀区金沙江路 1518 弄'
}]
},
created() {
},
methods: {
// 行颜色,没用
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
//
}
})
</script>
</html>