<el-table-column> 的v-if里怎么去list的值
时间: 2023-10-22 21:30:44 浏览: 282
如果你想在 `<el-table-column>` 的 `v-if` 中使用一个列表的值,你需要将该列表定义在组件的 `data` 选项中,然后在 `<el-table-column>` 中使用该列表的属性。例如:
```html
<el-table :data="tableData">
<el-table-column v-if="columns.length > 0" prop="name" label="姓名"></el-table-column>
<!-- 其他表格列 -->
</el-table>
```
在这个例子中,我们将一个名为 `columns` 的列表定义在组件的 `data` 选项中,并在 `<el-table-column>` 的 `v-if` 中使用 `columns.length` 属性来检查该列表是否包含任何列。如果列表不为空,则显示该列。注意,我们在 `<el-table-column>` 中使用 `prop` 属性来指定该列要显示的数据的属性名,`label` 属性用于指定该列的表头显示文本。
相关问题
</el-table-column> <el-table-column v-for="(col, i) in columnList" :key="i" :prop="col.prop" :label="col.label" v-if="col.show == true" align="center" > <template v-if="col.children"> <el-table-column v-for="(item, index) in col.children" :key="index" :prop="item.prop" :label="item.label" > </el-table-column> </template> </el-table-column> </el-table-column>编辑单元格
这段代码是用于渲染一个表格的列。每个`<el-table-column>`标签表示一个列,其中包含一些属性和内容。
在这段代码中,首先有一个外层的`<el-table-column>`标签,用于包裹所有的列。然后,在外层的`<el-table-column>`标签中使用了一个`v-for`循环来遍历`columnList`数组,生成每个列。
在每个列的`<el-table-column>`标签中,使用了一些属性来定义列的特性。其中包括`prop`属性用于指定表格数据中对应的字段名,`label`属性用于设置列的标题,`v-if`属性用于根据条件判断是否显示该列,`align`属性用于设置列的对齐方式。
如果某一列具有子列(即`col.children`存在),则使用了嵌套的`<el-table-column>`标签来渲染子列。在子列的`<el-table-column>`标签中,同样使用了一些属性来定义子列的特性。
总结起来,这段代码是通过循环遍历数组来动态生成表格的列,并且支持嵌套的子列结构。
<el-table :data="membersList" style="width: 100%"> <el-table-column type="index" label="序号" align="center" width="80"></el-table-column> <el-table-column label="考勤人员" align="center"> <el-table-column label="姓名" prop="memberName" align="center"></el-table-column> <el-table-column label="岗位" prop="post" align="center"></el-table-column> </el-table-column> <el-table-column label="出勤天数" prop="attendanceDays" align="center"></el-table-column> <el-table-column label="岗位系数" prop="postFactor" align="center"></el-table-column> <el-table-column label="调整系数" align="center"> <template slot-scope="scope"> <div> <el-input-number v-model="scope.row.adjustFactor" :precision="2" :step="0.01" :max="0.15" :min="-0.15" size="small" @change="changeFinal(scope.row)" ></el-input-number> </div> </template> </el-table-column> <el-table-column label="最终考勤天数" prop="finalDavs"></el-table-column> </el-table> <div class="membersDays"> <span>合计</span> <span>{{membersDaysJs}}</span>天 </div>computed: { membersDaysJs() { let num = 0; this.membersList.forEach(item => { if (item.finalDavs > 0) { num += item.finalDavs; } }); console.log(num); return num; } },
根据您提供的代码,我发现您的`computed`选项写在了模板的后面,而不是Vue组件的选项中。您应该将`computed`选项移到Vue组件的选项中,像这样:
```
<template>
<div>
<el-table :data="membersList" style="width: 100%">
<!-- 表格列定义 -->
</el-table>
<div class="membersDays">
<span>合计</span>
<span>{{membersDaysJs}}</span>天
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 数据定义
};
},
computed: {
membersDaysJs() {
let num = 0;
this.membersList.forEach(item => {
if (item.finalDavs > 0) {
num += item.finalDavs;
}
});
console.log(num);
return num;
}
},
methods: {
// 方法定义
}
};
</script>
```
这样应该可以解决computed不生效的问题。
阅读全文