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版权协议,转载请附上原文出处链接和本声明。