iview表格提供的单选按钮和多选按钮触发事件都是点击某个按钮才会触发,点击同行的其他地方不会触发,可以通过@on-row-click来实现:
<template> <div> <Table stripe :columns="columns" :data="datas" @on-row-click="clickRow" ref="table" @on-selection-change="selectionChange"></Table> </div> </template> <script> export default { data() { return { datas: [], columns: [], enCode: "", taskSelectList: [] } }, mounted() { }, methods: { /** * 表格点击一行触发选中 */ clickRow(row,index) { this.enCode = row.id; // 单选触发 this.$refs.table.toggleSelect(index); // 多选触发 }, /** * 多选框选择事件 */ selectionChange(val) { console.log(val); this.taskSelectList = val; }, /** * 设置表头 */ setColumns() { this.columns = [ // 多选框 { type: 'selection', width: 100, align: 'center' }, // 单选按钮 { title: '选择', key: 'chose', width: 100, align: 'center', render: (h, params) => { let id = params.row.id; let flag = false; if (this.enCode === id) { flag = true } else { flag = false } return h('div', [ h('Radio', { props: { value: flag }, on: { 'on-change': () => { this.enCode = params.row.id; } } }) ]) } }, { title: '序号', type: 'index', align: "center", minWidth: 80, maxWidth: 140 }, { title: '任务名称', key: 'taskName', type: "TEXT", align: "center", minWidth: 200, maxWidth: 360 } ] } } } </script> <style lang="stylus" scoped> </style>