vue + element 表格循环

本文讨论了在前端开发中遇到的问题,即后台仅返回ID但前端需要显示对应的name。通过使用预先声明的数据字典`typeOptions`,在表格展示时利用`find`方法实现ID到name的映射。这种方法在字典管理丰富的项目中常见,能有效解决前后端数据同步的问题。
摘要由CSDN通过智能技术生成

如果后台返回的只有id 但是前台页面要求回显name
有字典管理的项目应用比较多

  1. 表格部分



    {{typeOptions.find( s=> scopr.row.typeId).label}}


  2. 数据声明部分
    data(){
    return{
    typeOptions: [{
    key: 1,
    label: ‘类型1’
    },
    {
    key: 2,
    label: ‘类型2’
    }
    ] ,
    }
    }

Vue Element是一个基于Vue.js框架构建的UI组件库,提供了丰富的组件,方便开发者构建各种交互界面。要实现SKU表格,可以借助Vue Element的Table组件和选择器组件。 首先,需要准备好SKU的数据结构,包括SKU的属性以及对应的值。可以使用一个嵌套的数组来表示,例如: ``` [ { name: '颜色', values: ['红色', '蓝色', '绿色'] }, { name: '尺码', values: ['S', 'M', 'L'] } ] ``` 接下来,在Vue组件中使用Table组件来展示SKU表格。可以使用v-for指令循环遍历SKU的属性和值,生成表头和表格数据。同时,可以给每个单元格添加选择器组件来选择对应的属性值。 示例代码如下: ```html <template> <el-table :data="tableData"> <el-table-column v-for="attr in attributes" :key="attr.name" :label="attr.name" > <template slot-scope="scope"> <el-select v-model="scope.row[attr.name]" placeholder="请选择"> <el-option v-for="value in attr.values" :key="value" :label="value" :value="value"></el-option> </el-select> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { attributes: [ { name: '颜色', values: ['红色', '蓝色', '绿色'] }, { name: '尺码', values: ['S', 'M', 'L'] } ], tableData: [] }; }, created() { // 生成SKU表格数据 const skuData = this.generateSkuData(this.attributes); this.tableData = skuData; }, methods: { generateSkuData(attributes) { // 根据属性生成表格数据 const skuData = []; const rowLength = attributes.reduce((acc, curr) => acc * curr.values.length, 1); for (let i = 0; i < rowLength; i++) { const rowData = {}; let remain = i; attributes.forEach(attr => { const valueIndex = remain % attr.values.length; rowData[attr.name] = attr.values[valueIndex]; remain = Math.floor(remain / attr.values.length); }); skuData.push(rowData); } return skuData; } } }; </script> ``` 通过上述代码,可以实现一个基于Vue Element的SKU表格。每个单元格都可以通过选择器组件选择对应的属性值,从而构建SKU表格。当选择器的值发生改变时,可以通过监听事件获取到最新的SKU数据。这样,就可以根据选择器的值进行相应的业务操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值