iview表格实现单选

参考文档：https://blog.csdn.net/qq_35858002/article/details/88710244

效果图

image.png

 <Table ref="modalTable":columns="modalColumns" :data="deliveryData" border stripe></Table>

script

data() {
      return {
        currentChoose: '', // 选中的id
        modalColumns: [
          {
            title: '选择',
            key: 'id',
            width: 70,
            align: 'center',
            render: (h, params) => {
              let id = params.row.id;
              let flag = false;
              if (this.currentChoose === id) {
                flag = true
              } else {
                flag = false
              }
              let self = this
              return h('div', [
                h('Radio', {
                  props: {
                    value: flag
                  },
                  on: {
                    'on-change': () => {
                      self.currentChoose = id;
                    }
                  }
                })
              ])
            }
          },
          {title: '姓名', key: 'name'},
          {title: '手机号', key: 'contactPhone'},
        ],
}}