vxe-table 遍历单选radio

vxe-table 遍历单选radio

效果图

在这里插入图片描述

html代码

  <vxe-table-column field="valuationWay" title="计价方式" width="20%">
       <template v-slot="{row,column}">
           <vxe-radio-group v-model="valuationWay">
                <vxe-radio :name=row.id v-for="item in valuationWayList"
                v-model="row[column.property]" v-bind="item" :label=item.label :content=item.content>
                </vxe-radio>
           </vxe-radio-group>
       </template>

  </vxe-table-column>

js代码

 materGrid = new Vue({
                el: "#leaseInListTable",
                data() {
                    return {
                        tableData:[],
                        leaseInRentCurrencyList:[],
                        valuationWay:'2'//单选框label默认选中的的值
                    }
                },
                created(){
                    this.tableData = []
                    this.findValuationWayList()
                },
                methods:{
                    async findValuationWayList () {
                        debugger
                        var list = [];
                        for(var i = 0;i<leaseInValuationWayList.length;i++){ //leaseInValuationWayList是后台集合变量
                            var obj = {content:leaseInValuationWayList[i].dictName, label:leaseInValuationWayList[i].dictValue};//content 是文本内容  label是值
                            list.push(obj);
                        }
                        this.valuationWayList = list;//这一步赋值
                    },

引入的js包
链接: https://pan.baidu.com/s/1phaFcUT682yvgp8aKWGxtg
提取码: nh7h


版权声明:本文为Q_barbarbar原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。