基于Vue.js的iView组件库table组件内render 里面 tab 里面的单选

先上效果图：

打印选中的结果：

 

代码如下：

<template>
    <div>
        <!-- 列表信息 -->    
        <div class="listfile">
            <i-table border ref="selection" :columns="columns2" :data="data3"></i-table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="dataCount" :page-size="20" show-total :current="currentPage"></Page>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
   data () {
        return {
                dataCount:1,// 初始化信息总条数
                currentPage:1, //当前页
                pageSize:20,// 每页显示多少条
                columns2: [
                    {type: 'selection', width: 60,align: 'center'},
                    {title: '使用状态',key: 'usestate',width: 200,align: 'center',
                        render:(h, params) => {
                            return h('RadioGroup',
                                {
                                    props: {
                                        value: params.row.usestate //这里的value值对应Radio中的label中的值
                                    },
                                    on:{
                                        "on-change":(val)=>{
                                            params.row.usestate = val;
                                            console.log(val,"测试radio选中的项",params.row.usestate);
                                        }
                                    }
                                }, 
                            [
                                h('Radio', {
                                    style:{'margin-right': '20px'},
                                    props:{
                                        "label":"1"
                                    },
                                }, '未使用'),
                                h('Radio', {
                                    props:{
                                        "label":"2"
                                    }
                                }, '已使用')
                            ]);
                        }
                    },
                ],
                //列表初始数据
                data3: [
                    {
                        usestate: '1',
                    },
                    {
                        usestate: '2',
                    }
                ],
              }
      },
    methods: {
    },
    created(){
    },
    mounted(){
    },

  }
</script>

<style>

</style>

 注意事项：

变量传值时，因为用的是tab， 获取时只能是：usertate:   params.row.usestate;

所以传值时强制传：

this.data3[params.index].usestate = val;   

注意事项②：

tab 上不显示  radio 选中的值是因为是：指针除了问题；

这时候需要转换一下：

this.data3 = JSON.parse(JSON.stringify(this.data3));

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140