介绍实现方式一
& lt; template>
,& lt; div id=癮pp"比;
& lt;才能!——,需求:三国人物表格,要求不同的国别展示不同的颜色(魏国红色,蜀国黑色,吴国蓝色),——比;
& lt;才能el-table :数据=皌ableData",在
,大敌;& lt; el-table-column 支持=皀ame",标签=靶彰?宽度=?80“祝辞,& lt;/el-table-column>
,,& lt; el-table-column 支持=皀ation",标签=肮稹?宽度=?80“在,
,,,& lt; !——,思路通过模板插槽,获取对应的数据,不同的数据展示不同的颜色,当然只能让显示一个(通过v控制),——比;
,,,& lt; template 范围=皊cope"比;
,,,,& lt; div v=皊cope.row.nation ==, & # 39;魏国& # 39;“,在{{scope.row.nation}} & lt;/div>
,,,,& lt; div v=皊cope.row.nation ==, & # 39;蜀国& # 39;“,在{{scope.row.nation}} & lt;/div>
,,,,& lt; div v=皊cope.row.nation ==, & # 39;吴国& # 39;“,在{{scope.row.nation}} & lt;/div>
,,,& lt;/template>
,,& lt;/el-table-column>
,,& lt; el-table-column 支持=癰ornPlace",标签=俺錾胤健白４?& lt;/el-table-column>
& lt;才能/el-table>
,& lt;/div>
& lt;/template>
& lt; script>
export default {
,名字:“app",
,数据(){
return {才能
,,tableData:,
,,,{
,,,,名字:,“刘备“,
,,,,国家:,“蜀国“,
,,,,bornPlace:,“涿郡涿县(河北省涿州市)“,
,,,},
,,,{
,,,,名字:,“曹操“,
,,,,国家:,“魏国“,
,,,,bornPlace:,“沛国谯县(安徽省亳州市)“,
,,,},
,,,{
,,,,名字:,“孙权”,
,,,,国家:,“吴国“,
,,,,bornPlace:,“吴郡富春县(浙江省杭州市富阳区)“,
,,,},
,,,{
,,,,名字:,“关羽“,
,,,,国家:,“蜀国“,
,,,,bornPlace:,“河东郡解县(山西省运城市盐湖区解州镇)“,
,,,},
,,,,
,,};
},
};
& lt;/script> 实现方式二
& lt; template>
,& lt; div id=癮pp"比;
& lt;才能!——,需求:三国人物表格,要求不同的国别展示不同的颜色(魏国红色,蜀国黑色,吴国蓝色),——比;
& lt;才能el-table :数据=皌ableData",在
,大敌;& lt; el-table-column 支持=皀ame",标签=靶彰?宽度=?80“祝辞,& lt;/el-table-column>
,,& lt; el-table-column 支持=皀ation",标签=肮稹?宽度=?80“在,
,,,& lt; !——,思路通过模板插槽,获取对应的数据,通过vue动态风格的方法,动态显示不同的颜色,这种方式更加灵活,——比;
,,,& lt; template 范围=皊cope"比;
,,,,& lt; !——,意思是:给这个div绑定动态样式,颜色颜色的属性值为getColorByNation()这个方法的返回值,所以只需要通过传过去的scope 对方法的返回值做动态设置即可,——比;
,,,,& lt; div :在{{scope.row.nation}} & lt;/div>
,,,& lt;/template>
,,& lt;/el-table-column>
,,& lt; el-table-column 支持=癰ornPlace",标签=俺錾胤健白４?& lt;/el-table-column>
& lt;才能/el-table>
,& lt;/div>
& lt;/template>
& lt; script>
export default {
,名字:“app",
,数据(){
return {才能
,,tableData:,
,,,{
,,,,名字:,“刘备“,
,,,,国家:,“蜀国“,
,,,,bornPlace:,“涿郡涿县(河北省涿州市)“,
,,,},
,,,{
,,,,名字:,“曹操“,
,,,,国家:,“魏国“,
,,,,bornPlace:,“沛国谯县(安徽省亳州市)“,
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这期内容当中小编将会给大家带来有关利用ui元素怎么实现在el-table显示不同样式的数据,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
实现方式一
效果图如下
代码如下
方式一总结
这个第一种方式,虽然能实现效果,但是代码都写在el-table里面了,看起来比较臃肿,如果只要求动态展示两三种样式的话,还可以写,但是如果有七八种甚至更多样式动态展示,这种写法就会十分臃肿,且后期不太好维护。我个人推荐第二种方式,就是使用vue自带的:风格动态绑定样式来实现,不仅可以简洁代码,而且可以实现更加丰富的效果。如下:
实现方式二
效果图如下
代码如下
