<el-table-column v-for="field in field_display_ui" v-if="field === 2" :id= "'tb_' + field" :label="fields_dict[field]" :prop="field" v-if="field === 3" :id= "'tb_' + field" :label="fields_dict[field]" :prop="field" ></el-table-column>
时间: 2023-11-11 14:20:43 浏览: 87
这段代码中有两个问题:
1. 在同一个`el-table-column`元素中,重复使用了`v-if`指令。`v-if`只能在一个元素上使用一次,否则会报错。
2. 在第二个`v-if`条件中,判断的条件是`field === 3`,而在第一个`v-if`条件中,判断的条件是`field === 2`。这两个条件不一致,可能会导致错误。
以下是修正后的代码:
```
<el-table :data="tableData">
<el-table-column v-for="field in field_display_ui" :key="field" :id="'tb_' + field" :label="fields_dict[field]" :prop="field" v-if="field === 2 || field === 3"></el-table-column>
</el-table>
<script>
export default {
data() {
return {
tableData: [],
field_display_ui: [2, 3], // 控制显示哪些列
fields_dict: { // 列名字典
2: '列1',
3: '列2'
}
};
},
// ...
};
</script>
```
在上述代码中,我们将两个`v-if`条件合并到了一个`el-table-column`元素中,并且使用了`||`逻辑运算符来判断多个条件。同时,我们也将`fields_dict`对象单独定义出来,使得代码更加清晰易懂。
阅读全文