复杂数据回显 返回json 字符串转换成单选

 <el-table

                :data="tableData"

                border

                style="width: 882px; margin-left: 8px;">

                <el-table-column

                prop="label"

                label="数据类型"

                width="180"

                align="center">

                </el-table-column>

                <el-table-column

                prop="property"

                label="数据权限"

                width="700"

                align="center">

                    <template slot-scope="scoped">

                            <el-radio-group v-model="scoped.row.checked" @change="handleChange">

                                <el-radio v-for="item in scoped.row.property" :label="item.key" :key="item.key">{{item.label}}</el-radio>

                            </el-radio-group>

                       

                    </template>

                </el-table-column>

            </el-table>

 

返回数据：

"{\"basicData\":[{\"name\":\"SalesOpportunity\",\"label\":\"销售机会\",\"property\":[{\"key\":\"Private\",\"value\":false,\"label\":\"私有\"},{\"key\":\"SuperiorReadOnly\",\"value\":false,\"label\":\"上级只读\"},{\"key\":\"SuperiorReadAndWrite\",\"value\":false,\"label\":\"上级读写\"},{\"key\":\"OpenReadOnly\",\"value\":true,\"label\":\"公开只读\"},{\"key\":\"OpenReadAndWrite\",\"value\":false,\"label\":\"公开读写\"}],\"checked\":\"OpenReadOnly\"},{\"name\":\"PotentialCustomers\",\"label\":\"潜在客户\",\"property\":[{\"key\":\"Private\",\"value\":true,\"label\":\"私有\"},{\"key\":\"SuperiorReadOnly\",\"value\":false,\"label\":\"上级只读\"},{\"key\":\"SuperiorReadAndWrite\",\"value\":false,\"label\":\"上级读写\"},{\"key\":\"OpenReadOnly\",\"value\":false,\"label\":\"公开只读\"},{\"key\":\"OpenReadAndWrite\",\"value\":false,\"label\":\"公开读写\"}],\"checked\":\"Private\"},{\"name\":\"SalesContract\",\"label\":\"销售合同\",\"property\":[{\"key\":\"Private\",\"value\":true,\"label\":\"私有\"},{\"key\":\"SuperiorReadOnly\",\"value\":false,\"label\":\"上级只读\"},{\"key\":\"SuperiorReadAndWrite\",\"value\":false,\"label\":\"上级读写\"},{\"key\":\"OpenReadOnly\",\"value\":false,\"label\":\"公开只读\"},{\"key\":\"OpenReadAndWrite\",\"value\":false,\"label\":\"公开读写\"}],\"checked\":\"Private\"}]}"

 

   //对原始数据进行处理(渲染列表时)

     dealData(datas){

        if(datas&&datas.length>0){

            datas.map(e=>{

                for(var i=0;i<e.property.length;i++){

                    if(e.property[i].value){

                        this.$set(e,'checked',e.property[i].key)

                        break;

                    }

                }

            })

        }else{

            datas = [];

        }

    },

 

//radio更改数据后，将更改的数据写入原始对象

    dealData1(datas){

        if(datas&&datas.length>0){

            datas.map(e=>{

                for(var i=0;i<e.property.length;i++){

                   

                    if(e.checked==e.property[i].key){

                        e.property[i].value = true;

                    }else{

                        e.property[i].value = false;

                    }

                }

            })

        }else{

            datas = [];

        }

    },

 

//更新数据

getRulesListInfo(){

            getRulesList({category:"basicData"}).then((res)=>{

                let list=JSON.parse(res.data[0].configValue).basicData;

                this.tableData =list;

                this.dealData(this.tableData);

                this.tableData.push({});

                this.tableData.pop();

            })

        },

        handleChange(e){

           

            this.$forceUpdate();

            this.dealData1(this.tableData);

            //后面执行 数据提交就可以了

            let basc={ basicData:this.tableData }

            let params={

                category:"basicData",

                configKey:"basicData",

                configValue:JSON.stringify(basc),

                crmConfigId:"1",

                name:"基础数据",

                remark:"基础数据",

                type:"1",

            }

            var list= [];

            list.push(params)

            updateRulesList(list).then((res)=>{

                this.$message.success("基础数据更新成功!");

            })

        }

    }