<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>仅仅做展示用如何优化
时间: 2024-02-14 17:11:33 浏览: 22
如果仅仅是做展示用,可以考虑将下拉框替换成文本展示。这样既可以避免下拉框数据过多的问题,也可以简化页面结构,提升渲染性能。可以将代码修改如下:
```
<el-table-column align="center" header-align="center" property="num_min" label="商品编码">
<template slot-scope="scope">
<span>{{ scope.row.goods_id }}</span>
</template>
</el-table-column>
```
这样就将下拉框改成了简单的文本展示,不会再出现下拉框数据过多的问题。
相关问题
<el-table-column v-else align="center" header-align="center" property="goods_name" label="商品"> <template slot-scope="scope"> <el-select clearable v-model="scope.row.goods_id"> <el-option v-for="goods in merchandiseNameData" :key="goods.data" :label="goods.value" :value="goods.data"> </el-option> </el-select> </template> </el-table-column> <el-table-column width="160" align="center" header-align="center" property="" label="材质"> <template slot-scope="scope"> <span>{{ scope.row.texture }}</span> </template> </el-table-column>上面下拉框改变 修改下面的值
您的问题是如何实现在上面的下拉框改变后,自动修改下面的值。实现这个功能,可以在上面的下拉框中使用 `@change` 事件,当下拉框的值改变时,触发该事件,然后在事件处理函数中修改对应的值。具体代码实现可以参考下面的示例:
```
<el-table-column v-else align="center" header-align="center" property="goods_name" label="商品">
<template slot-scope="scope">
<el-select clearable v-model="scope.row.goods_id" @change="updateTexture(scope.row)">
<el-option v-for="goods in merchandiseNameData" :key="goods.data" :label="goods.value" :value="goods.data"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column width="160" align="center" header-align="center" property="" label="材质">
<template slot-scope="scope">
<span>{{ scope.row.texture }}</span>
</template>
</el-table-column>
```
在 `@change` 事件处理函数中,可以根据 `scope.row.goods_id` 的值找到对应的材质,然后修改 `scope.row.texture` 的值,示例代码如下:
```
methods: {
updateTexture(row) {
// 根据商品ID找到对应的材质
const texture = this.getTextureById(row.goods_id)
// 修改材质的值
this.$set(row, 'texture', texture)
},
getTextureById(goodsId) {
// 根据商品ID找到对应的材质
// ...
}
}
```
需要注意的是,在修改 `scope.row.texture` 的值时,需要使用 `$set` 方法,因为 `scope.row` 是响应式对象,直接修改其属性的值可能无法触发视图更新。
<el-table-column align="center" label="快递" > <el-table-column :cell-style="{ backgroundColor: '#f52f1e' }" align="right" prop="exAmount" label="销售金额" > <template slot-scope="scope">{{num_filters(scope.row.exAmount)}}</template> </el-table-column> <el-table-column align="right" prop="exSalesProfit" label="销售毛利"> <template slot-scope="scope">{{num_filters(scope.row.exSalesProfit)}}</template> </el-table-column> </el-table-column> 以上代码中:cell-style无效
根据你提供的代码,我可以看出其中存在一个嵌套的问题。在 `<el-table-column>` 标签下,你又使用了一个 `<el-table-column>` 标签。这个标签不应该被嵌套在父级标签内部,而应该在同一层级下。因此,`cell-style` 的样式无效可能是由于这个嵌套问题导致的。你可以将第二个 `<el-table-column>` 标签移动到与另一个同级别的位置,就可以解决这个问题了。例如:
```
<el-table-column align="center" label="快递">
<el-table-column align="right" prop="exAmount" label="销售金额">
<template slot-scope="scope">{{num_filters(scope.row.exAmount)}}</template>
</el-table-column>
<el-table-column align="right" prop="exSalesProfit" label="销售毛利">
<template slot-scope="scope">{{num_filters(scope.row.exSalesProfit)}}</template>
</el-table-column>
</el-table-column>
```