<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>
时间: 2024-03-02 14:48:21 浏览: 30
根据您的代码,我发现您的计算属性名为`membersDaysJs`,但是在模板中使用时没有加上括号`()`,因此无法正确调用这个计算属性。您需要将`{{membersDaysJs}}`修改为`{{membersDaysJs()}}`。这应该可以解决computed不生效的问题。
所以,您的模板应该是这样的:
```
<el-table :data="membersList" style="width: 100%">
<!-- 表格列定义 -->
</el-table>
<div class="membersDays">
<span>合计</span>
<span>{{membersDaysJs()}}</span>天
</div>
```
相关问题
<el-table :data="tableData" :row-key="rowKey" border :tree-props="{children: 'children'}" :cell-class-name="dianClass" @cell-click="seeDetail" :header-cell-style="{background:'#f0f0f0'}"> <el-table-column width="50"></el-table-column> <el-table-column align="center" type="index" label="序号"> <template slot-scope="scope">{{ scope.$index + 1 }}</template> </el-table-column> <el-table-column align="center" prop="name" label="工程名称"></el-table-column> <el-table-column align="center" prop="code" label="工程编码"></el-table-column> <el-table-column align="center" prop="startDate" label="实际开工时间" :formatter="TimeFor"></el-table-column> <el-table-column align="center" prop="su" label="执行中的风险作业(A/B票)"></el-table-column> <el-table-column align="center" prop="ballNumber" label="布控球台数"></el-table-column> <el-table-column align="center" prop="toa" label="工程进度"></el-table-column> </el-table>
蓝色'}">这段代码的作用是什么?
这段代码是用来渲染一个表格的,其中包括以下几个属性:
- data:表格的数据源,即要展示的数据。
- row-key:表格行的唯一标识符,用于优化表格的渲染性能。
- border:是否显示表格的边框。
- tree-props:用于渲染树形表格,指定树形结构的子节点属性名为'children'。
- cell-class-name:用于自定义单元格的类名,可以根据数据的不同来动态添加类名。
- cell-click:单元格点击事件,可以在点击单元格时执行相应的操作。
- header-cell-style:表头单元格的样式,可以自定义表头单元格的样式,如背景色等。
<commonTable :columns="column" :data="tableData" :pager="page" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" @handleSelectionChange="handleSelectionChange"> <el-table-column slot="seqNumber" label="序号" :index="(page.page - 1) * page.size + 1" type="index" align="center" width="64"></el-table-column> <img class="pic" :src="baseUrl + 'mgr/file/showImgByPath?imgPath=' + tableData.depthPic" /> </commonTable> 这个图片展示不出来在组件中,如何让其展示
首先,请确保图片路径 `tableData.depthPic` 是正确的。接下来,您可以尝试使用 `require` 来加载图片,以确保它能在组件中正确展示。
您可以将代码修改为以下形式:
```html
<template>
<commonTable :columns="column" :data="tableData" :pager="page" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" @handleSelectionChange="handleSelectionChange">
<el-table-column slot="seqNumber" label="序号" :index="(page.page - 1) * page.size + 1" type="index" align="center" width="64"></el-table-column>
<el-table-column label="图片">
<template slot-scope="scope">
<img class="pic" :src="require(baseUrl + 'mgr/file/showImgByPath?imgPath=' + scope.row.depthPic)" />
</template>
</el-table-column>
</commonTable>
</template>
```
在这个修改后的代码中,我们在 `el-table-column` 组件中添加了一个 `slot-scope` 属性,并在其中使用 `require` 方法来加载图片。这样可以确保图片能够在组件中正确展示。注意,`require` 方法需要传入一个静态的图片路径,所以我们将动态的 `tableData.depthPic` 放在字符串拼接中。
希望这个解决方案能够帮助到您!如果还有其他问题,请随时提问。