zoukankan      html  css  js  c++  java
  • iView table 单选实现(转载)

    来源:https://blog.csdn.net/qq_35858002/article/details/88710244

    效果

     代码

     <Table ref="modalTable":columns="modalColumns" :data="deliveryData" border stripe></Table>
    data() {
          return {
     currentChoose: '',
    modalColumns: [
              {
                title: '选择',
                key: 'id',
                 70,
                align: 'center',
                render: (h, params) => {
                  let id = params.row.id;
                  let flag = false;
                  if (this.currentChoose === id) {
                    flag = true
                  }
                  let self = this
                  return h('div', [
                    h('Radio', {
                      props: {
                        value: flag
                      },
                      on: {
                        'on-change': () => {
                          self.currentChoose = id;
                        }
                      }
                    })
                  ])
                }
              },
              {title: '姓名', key: 'name'},
              {title: '手机号', key: 'contactPhone'},
     
            ],
     
    }}
     
    

      

    iView table单选实现

     <Table ref="modalTable":columns="modalColumns" :data="deliveryData" border stripe></Table>
    1.  
      data() {
    2.  
      return {
    3.  
      currentChoose: '',
    4.  
      modalColumns: [
    5.  
      {
    6.  
      title: '选择',
    7.  
      key: 'id',
    8.  
      width: 70,
    9.  
      align: 'center',
    10.  
      render: (h, params) => {
    11.  
      let id = params.row.id;
    12.  
      let flag = false;
    13.  
      if (this.currentChoose === id) {
    14.  
      flag = true
    15.  
      } else {
    16.  
      flag = false
    17.  
      }
    18.  
      let self = this
    19.  
      return h('div', [
    20.  
      h('Radio', {
    21.  
      props: {
    22.  
      value: flag
    23.  
      },
    24.  
      on: {
    25.  
      'on-change': () => {
    26.  
      self.currentChoose = id;
    27.  
      }
    28.  
      }
    29.  
      })
    30.  
      ])
    31.  
      }
    32.  
      },
    33.  
      {title: '姓名', key: 'name'},
    34.  
      {title: '手机号', key: 'contactPhone'},
    35.  
       
    36.  
      ],
    37.  
       
    38.  
      }}

     

    树立目标,保持活力,gogogo!
  • 相关阅读:
    CSS color
    Python 集成开发环境(IDE)
    Flexible and Economical UTF-8 Decoder
    方程式组织EQUATION DRUG平台解析(提纲) —方程式组织系列分析报告之四
    Windows Server 2008 IE 无法调整安全级别
    蟑螂数据库
    MySQL OCP
    TCP协议疑难杂症全景解析
    数据库资源博客---小麦苗BEST
    C++并发实战 与多线程
  • 原文地址:https://www.cnblogs.com/hao-1234-1234/p/14341415.html
Copyright © 2011-2022 走看看