<el-table-column align="center" header-align="center" property="num_min" label="商品编码"> <template slot-scope="scope"> <el-select :disabled="!infoIsDarft" clearable v-model="scope.row.goods_id"> <el-option v-for="goods in merchandiseNameData" :key="goods.data" :label="goods.num" :value="goods.data"> </el-option> </el-select> </template> </el-table-column>渲染时卡顿如何优化

下拉框渲染时卡顿的问题可能是由于下拉框数据过多，渲染时间较长造成的。可以考虑以下几个方面来优化：

1. 虚拟滚动。只渲染可见的部分下拉框数据，滚动时再动态渲染其他数据，可以减少渲染时间和内存占用。

2. 异步加载数据。将下拉框数据异步加载，可以减少渲染时间，提升页面性能。

3. 缓存数据。将下拉框数据缓存起来，避免每次渲染都需要重新获取数据。

4. 减少渲染次数。可以考虑将下拉框渲染成静态文本，避免反复渲染造成的性能问题。

综上所述，可以通过以上的优化方式来减少下拉框渲染时卡顿的问题。具体的实现方式需要结合具体的业务场景和页面结构来进行优化。

相关问题

<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：表头单元格的样式，可以自定义表头单元格的样式，如背景色等。

<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>

根据您的代码，我发现您的计算属性名为`membersDaysJs`，但是在模板中使用时没有加上括号`()`，因此无法正确调用这个计算属性。您需要将`{{membersDaysJs}}`修改为`{{membersDaysJs()}}`。这应该可以解决computed不生效的问题。

所以，您的模板应该是这样的：

<el-table :data="membersList" style="width: 100%">
  <!-- 表格列定义 -->
</el-table>
<div class="membersDays">
  <span>合计</span>
  <span>{{membersDaysJs()}}</span>天
</div>