iview中Table单选

iview中Table实现单选功能,先看图

html

<Table class="table_son1"  border  :columns="tableColumns2" :data="tableData2" ></Table>

对应的js

tableColumns2: [
   {
     title: '选择',
     width: 60,
     align: 'center',
     render: (h, params) => {
       return h('Radio', {
         props: {
           value: params.row.isselected
         },
         on: {
           'on-change': () => {
             this.ids = params.row.id
             this.systemVersionIssueId = params.row.systemVersionId
             this.tableData2.forEach(items => { // 每次选中下一条数据时将每一条数据设为false
               // items.tag=false      错误，使用$set设置
               this.$set(items, 'isselected', false)// 正确 
             })
             this.tableData2[params.index].isselected = true // 当前数据设为已选中状态
             // console.log(this.tableData2, '数据打印')
             // console.log(params, 'params', this.ids, this.systemVersionIssueId)
           }
         }
       })
     }
   }, {
     title: '关键词',
     align: 'center',
     key: 'keyword',
     width: 150
   }, {
     title: '摘要',
     key: 'summary',
     align: 'center',
     render: (h, { row, index, column }) => {
       return h('div', row.summary ? row.summary : '')
     }
   }
 ], // 列render

接口数据处理

if (res.success) {
   _this.tableData2 = res.result
   res.result.map(item => {
     Object.assign(res.result[0], { isselected: false }) // 拷贝一个是否选中字段 isselected
   })
   _this.tableData2 = res.result
 }