未设置之前样式:
目标样式:
接下来就是神奇的代码
实现功能当状态内有内容是,根据匹配转成对应的文字,当状态无内容时,则不显示tag标签。
实现方式1:
<template>
<div>
<el-table :data="tableData">
<el-table-column label="数据" prop="status">
<template slot-scope="scope">
<el-tag v-if="getTagType(scope.row.status)" :type="getTagType(scope.row.status)">{{ getTagLable(scope.row.status) }}</el-tag>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ status: 10 },
{ status: 20 },
{ status: 30 },
{ status: null }
]
}
},
methods: {
getTagType(data) {
if (data === 10) {
return 'success';
} else if (data === 20) {
return 'danger';
} else if (data === 30) {
return 'warning';
} else {
return ''
}
},
getTagLable(data) {
if (data === 10) {
return '正常(可使用)';
} else if (data === 20) {
return '锁定(占用)';
} else if (data === 30) {
return '临时锁定(预占用)';
} else {
return ''
}
},
}
}
</script>
实现方式2:
<template>
<div>
<el-table :data="tableData">
<el-table-column label="数据" prop="status">
<template slot-scope="scope">
<el-tag v-if="scope.row.status === 10" type="success">可使用</el-tag>
<el-tag v-else-if="scope.row.status === 20" type="danger">占用</el-tag>
<el-tag v-else-if="scope.row.status === 30" type="warning">预占用</el-tag>
<span v-else>{{ scope.row.status }}</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ status: 10 },
{ status: 20 },
{ status: 30 },
{ status: null }
]
}
},
methods: {
}
}
</script>
赶紧来试试吧!!!