elementUI 表格组件怎么嵌套el-tag标签
在elementUI的表格组件中,可以通过使用自定义列模板来嵌套
- 在表格列定义中,使用scoped slot来定义自定义列模板:
<el-table-column label="状态">
<template slot-scope="scope">
<el-tag>{{ scope.row.status }}</el-tag>
</template>
</el-table-column>
-
在自定义列模板中,嵌套
标签,并使用scope.row来获取表格数据中的状态值。 -
如果需要对
标签进行样式调整,可以使用elementUI提供的class和style的属性来设置样式。例如:
<el-table-column label="状态">
<template slot-scope="scope">
<el-tag :class="getStatusClass(scope.row.status)" :style="getStatusStyle(scope.row.status)">
{{ scope.row.status }}
</el-tag>
</template>
</el-table-column>
- 在getStatusClass和getStatusStyle方法中,根据不同的状态值返回不同的class和style属性值,从而实现样式调整。例如:
getStatusClass(status) {
if (status === '已完成') {
return 'success';
} else if (status === '进行中') {
return 'warning';
} else {
return 'danger';
}
},
getStatusStyle(status) {
if (status === '已完成') {
return { color: 'green' };
} else if (status === '进行中') {
return { color: 'orange' };
} else {
return { color: 'red' };
}
}
- 最终,可以根据不同的状态值,显示不同的标签样式和文字内容。
原文地址: http://www.cveoy.top/t/topic/bckF 著作权归作者所有。请勿转载和采集!