技術標籤：前端

vxe-table 遍歷單選radio

效果圖

html程式碼

  <vxe-table-column field="valuationWay" title="計價方式" width="20%">
          <template v-slot="{row,column}">
                <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>
           </template>
  </vxe-table-column>

js程式碼

 materGrid = new Vue({
                el: "#leaseInListTable",
                data() {
                    return
 
 {
                        tableData:[],
                        leaseInRentCurrencyList:[]
                    }
                },
                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