<el-tag v-if=" scope.row.status===2" type="danger">禁用</el-tag>
<el-tag v-if=" scope.row.status===1" type="success">启用</el-tag>
两个的简写
<el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{scope.row.status === 1 ? '启用':'禁用'}}</el-tag>
多个的简写
<el-tag v-for="(item,index) in menuCateMap" v-show="scope.row.type == item.value" :key="index" :type="item.cssName">
{{item.label}}
</el-tag>
JS
menuCateMap: [
{ label: '菜单', value: 1, cssName: 'success' },
{ label: '目录', value: 2, cssName: 'primary' },
{ label: '按钮', value: 3, cssName: 'danger' },
{ label: '顶级菜单', value: 4, cssName: 'warning' },
{ label: '字段', value: 5, cssName: 'info' },
]
<div class="col-md-9" style="padding-top: 10px;">
<el-table
:data="tablets"
height="700"
border
stripe
style="width: 100%;margin-top: 38px;">
<el-table-column
label="客户部门"
width="160">
<template slot-scope="scope">
<template v-for="tag in scope.row.client_depart">
<el-tag :key="tag.name">
${tag.name}
</el-tag>
</template>
</template>
</el-table-column>
<el-table-column
prop="is_require"
label="是否必选"
width="80"
filter-placement="bottom-end">
<template slot-scope="scope">
<el-tag v-if="scope.row.is_require == 0">否</el-tag>
<el-tag v-else>是</el-tag>
</template>
</el-table-column>
<el-table-column
label="AAA"
width="300">
<template slot-scope="scope">
<el-tag
v-for="tag in tags"
:key="tag.name"
:type="tag.type">
<span>${tag.name}</span>
</el-tag>
</template>
</el-table-column>
</el-table>
</div>
delimiters: ['${', '}'],
<el-table-column
label="AAA"
width="300">
<template slot-scope="scope">
<el-tag
v-for="tag in tags"
:key="tag.name"
:type="tag.type">
<span>${tag.name}</span>
</el-tag>
</template>
</el-table-column>
var Main = {
delimiters: ['${', '}'],
data() {
return {
tags: [
{ name: '标签一', type: 'success' },
{ name: '标签二', type: 'success' },
{ name: '标签三', type: 'success' },
{ name: '标签四', type: 'success' },
{ name: '标签五', type: 'success' }
],
}
}
},