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