elementui动态生成表格列,element table自定义样式
本文主要介绍el-table中一列数据的不同样式的例子，动态实现元素ui。通过示例代码进行了非常详细的介绍，对大家的学习或工作都有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。
问题描述
在饿了么ui的框架下，输入数据el-form，输出数据el-table。有时候产品希望枯燥的表格有一些动态的风格，比如不同的内容展现不同的风格。对于这个需求，其实有很多方法。本文列举两个供参考。
实现方式一
效果图如下
代码如下所示
模板
div id=应用程序
！-需求：三国人物表，要求不同国家显示不同颜色(魏红、蜀黑、吴蓝)-
El-table:data= table data style= width:100%
El-table-column prop= name label= name width= 180 /El-table-column
El-table-column prop= nation label= country width= 180
！-思路是通过模板槽得到相应的数据，不同的数据显示不同的颜色。当然只能显示一个(由v-if控制)—
模板范围=“范围”
div v-if= scope . row . nation==== Wei style= color:red；font-weight:bold；{{scope.row.nation}}/div
div v-if= scope . row . nation==== Shu style= color:black；font-weight:bold；{{scope.row.nation}}/div
div v-if= scope . row . nation==== Wu style= color:blue；font-weight:bold；{{scope.row.nation}}/div
/模板
/El-表格-列
El-table-column prop=出生地 label=出生地/el-table-column
/el-table
/div
/模板
脚本
导出默认值{
名称：“应用程序”，
data() {
返回{
表格数据：[
{
姓名：刘备，
民族：“蜀国”，
出生地：“卓君涿州市涿县”，
},
{
姓名：曹操，
民族：魏，
出生地：“郭培乔县(安徽亳州市)”，
},
{
姓名：孙权，
民族：吴，
出生地：“吴军富春县(浙江省杭州市富阳区)”，
},
{
姓名：关羽，
民族：“蜀国”，
出生地：“河东县界县(山西省运城市盐湖区界州镇)”，
},
],
};
},
};
/脚本
方法概述
第一种方法，虽然能达到效果，但是代码是用el-table写的，看起来比较臃肿。如果只需要动态显示两三种样式，就可以写。但是如果动态显示七八个或者更多的样式，这种写法会很臃肿，后期也不好维护。个人推荐第二种方式，即使用vue自带的：style动态绑定风格，这样不仅可以简化代码，还可以实现更丰富的效果。如下所示：
实现方式二
效果图如下
代码如下所示
模板
div id=应用程序
！-需求：三国人物表，要求不同国家显示不同颜色(魏红、蜀黑、吴蓝)-
El-table:data= table data style= width:100%
El-table-column prop= name label= name width= 180 /El-table-column
El-table-column prop= nation label= country width= 180
！-思路是通过模板槽获取相应的数据，通过vue动态样式方法动态显示不同的颜色，更加灵活-
模板范围=“范围”
！-含义：将动态样式绑定到这个div，color color的属性值是方法getColorByNation()的返回值，所以你只需要通过传递的作用域动态设置方法的返回值即可-
div:style= { color:getColorByNation(scope)，fontSize:getSizeByNation(scope)，font weight: bold } { { scope . row . nation } }/div
/模板
/El-表格-列
El-table-column prop=出生地 label=出生地/el-table-column
/el-table
/div
/模板
脚本
导出默认值{
名称：“应用程序”，
data() {
返回{
表格数据：[
{
姓名：刘备，
民族：“蜀国”，
出生地：“卓君涿州市涿县”，
},
{
姓名：曹操，
民族：魏，
出生地：“郭培乔县(安徽亳州市)”，
},
{
姓名：孙权，
民族：吴，
出生地：“吴军富春县(浙江省杭州市富阳区)”，
},
{
姓名：关羽，
民族：“蜀国”，
出生地：“河东县界县(山西省运城市盐湖区界州镇)”，
},
],
};
},
方法：{
//动态设置颜色
getColorByNation(范围){
console.log(作用域)；//打印出来传递的范围是表格不同行对应的整行数据。有图片如下：
If(scope.row.nation== Wei) {
返回“红色”
} else if(scope . row . nation== Shu ){
返回“黑色”
} else if(scope . row . nation== Wu ){
返回“蓝色”
}
},
//动态设置字体大小
getSizeByNation(范围){
If(scope.row.nation== Wei) {
返回 14px
} else if(scope . row . nation== Shu ){
返回 18px
} else if(scope . row . nation== Wu ){
返回 24px
}
}
},
};
/脚本
打印传递的作用域。
两种方式总结
这种方法由vue绑定风格控制，比第一种方法灵活得多。毕竟第一种方式是用el-table写，第二种方式是用方法写。使用具体的那种，看现场要求。
这就是本文关于el-table的一列中不同风格的数据的例子，它动态地实现了元素ui。有关el-table动态实现元素ui的一列中不同样式数据的更多示例，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。