装饰公司营销网站建设,浙江高端网站建设,网站兼容代码,包头网站建设熊掌号本文 Element-ui 版本 2.x
问题
在 el-table-column 上需根据不同 v-if 条件来控制列显隐时#xff0c;就会出现列数据展示错乱的情况#xff08;要么 A 列的数据显示在 B 列上#xff0c;或者后端返回有数据的但是显示的为空#xff09;#xff0c;如下所示。
tem…本文 Element-ui 版本 2.x
问题
在 el-table-column 上需根据不同 v-if 条件来控制列显隐时就会出现列数据展示错乱的情况要么 A 列的数据显示在 B 列上或者后端返回有数据的但是显示的为空如下所示。
templatedivel-table:datatableDatabordersizeministylewidth: 100%el-table-column propdate label登记日期 aligncenter /el-table-columnel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propage label年龄 aligncenter/el-table-columnel-table-column propsex label性别 aligncenter v-ifflag1/el-table-columnel-table-column propheight label身高 aligncenter v-ifflag2/el-table-columnel-table-column propaddress label城市 aligncenter/el-table-column /el-table/div
/template解决方法
在每个需要使用 v-if 或 v-else 的 el-table-column 上增加 key 作为唯一标识这样渲染的时候就不会因为复用原则导致列数据混乱了。关于key值一般习惯使用字段名也可随机生成一个值只要具有唯一性就可以。
templatediv classhomeel-table:datatableDatabordersizeministylewidth: 100%el-table-column propdate label登记日期 aligncenter /el-table-columnel-table-column propname label姓名 aligncenter/el-table-columnel-table-column propage label年龄 aligncenter/el-table-columnel-table-column propsex label性别 aligncenter keysex v-ifflag1/el-table-columnel-table-column propheight label身高 aligncenter keyheight v-ifflag2/el-table-columnel-table-column propaddress label城市 aligncenter/el-table-column /el-table/div
/template拓展关于 key Vue官方文档的说明
