iview Table表格单选框互斥


表格中添加单选框,并且互斥

首先带data中定义   currentid : 0 ;表示默认不选中

{
                        title: "名称",
                        key: "name",
                        render: (h, params) => {
                            // console.log(params,'----------------params------------------') //为data中的值
                            let id = params.row.id;
                            let defaultS = false;
                            // console.log(this.currentid)
                            if (this.currentid == id) {
                                defaultS = true;
                            } else {
                                defaultS = false
                            }
                            let self = this;
                            return h('Radio', {
                                props: {
                                    value: defaultS  //判断单选框状态
                                },
                                on: {
                                    'on-change': () => {
                                        self.currentid = id; //赋值单选框id。对比id判断状态
                                       
                                    }
                                }
                            }, params.row.cname)
                        },
    },

  

render中使用for循环 ,, jsx中只能写表单式,不能写多行语句用map映射

 render: (h, params) => {
            let stat = (params.row.size/1024).toFixed(2);
            let IPArr = params.row.diskSizes;
            for(var i in IPArr){
              (IPArr[i].capacityInKB/1024).toFixed(2);
            };
            console.log(IPArr)
            return h("div", [
              h(
                "Tooltip",
                {
                  props: {
                    transfer: true
                  }
                },
               [
              stat,
              IPArr.map(function (item,index) {
                return h('div',{
                  slot: 'content',
                  style: {
                    whiteSpace: 'normal',
                    wordWrap: 'break-word'
                  }
                }, [
                  h('p' , item.disk)
                ])
              })
            ]
              )
            ]);
          }

  

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM