解决Element-UI 在table组件el-table-column中使用v-if的问题

**场景：**切换页签时动态改变表格展示列以及对应数据项**使用方式：**通过v-if条件判断控制显隐**问题：**导致表头乱飞、错位，明明数据项有值，但是通过props获取值在页面上没有显示出来**分析原因：**vue在渲染元素时，处于效率考虑，会尽量地复用已有的元素而非重新渲染，导致元素间相互影响，不能正常渲染解决方案：用 key 管理可复用的元素只需添加一个具有唯一值的 key attri

lucasxt

17338人浏览 · 2020-09-30 10:59:57

lucasxt · 2020-09-30 10:59:57 发布

场景： 切换页签时动态改变表格展示列以及对应数据项
使用方式： 通过v-if条件判断控制显隐
问题： 导致表头乱飞、错位，明明数据项有值，但是通过props获取值在页面上没有显示出来
分析原因： vue在渲染元素时，处于效率考虑，会尽量地复用已有的元素而非重新渲染，导致元素间相互影响，不能正常渲染
解决方案：
用 key 管理可复用的元素
只需添加一个具有唯一值的 key attribute 表名“该元素是完全独立的，不要复用它”

<el-table-column prop="name" label="姓名" key="name" > </el-table-column>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^