vue+elemnetUI el-table表格中,一个页面动态展示两个table时,内容、操作栏按钮错位问题,el-tag标签可根据对应值改变样式【适用于二元值】

问题描述①:

在一个页面中表A展示如下

vue+elemnetUI el-table表格中,一个页面动态展示两个table时,内容、操作栏按钮错位问题,el-tag标签可根据对应值改变样式【适用于二元值】_第1张图片

切换到表B,内容、操作栏按钮错位

vue+elemnetUI el-table表格中,一个页面动态展示两个table时,内容、操作栏按钮错位问题,el-tag标签可根据对应值改变样式【适用于二元值】_第2张图片

解决问题①:

解决方式一:在表A的el-table里面,增加一个关键字key,唯一标识下即可

 

 vue+elemnetUI el-table表格中,一个页面动态展示两个table时,内容、操作栏按钮错位问题,el-tag标签可根据对应值改变样式【适用于二元值】_第3张图片

解决方式二:在第一个表,表A的操作栏,操作栏处的template标签里面,新增一个v-if条件,控制按钮隐藏显示。

vue+elemnetUI el-table表格中,一个页面动态展示两个table时,内容、操作栏按钮错位问题,el-tag标签可根据对应值改变样式【适用于二元值】_第4张图片 

问题描述②:

设置效果如下,是否为系统客户栏下标签,可根据每一行数据改变不同样式,适用于二元值

vue+elemnetUI el-table表格中,一个页面动态展示两个table时,内容、操作栏按钮错位问题,el-tag标签可根据对应值改变样式【适用于二元值】_第5张图片

解决问题②:

  
     
         
     
    .....
 

在所需要二元判断tag的el-table-column行,下面嵌入

  

然后运用二元表达式,分别控制tag类型和显示值样式即可

{{ scope.row.customerId != null ? "✔" : "×" }}

你可能感兴趣的:(vue.js,javascript,前端)