目录
解决方法: 修改table控件的触发事件 为行点击事件 row-click
无取消部分
未实现取消操作的代码:
<el-table
v-loading="loadingg"
:data="tableData" height="100%"
style="width: 100%"
:highlight-current-row="true"
@current-change="clickChange">
<el-table-column
label="选择"
width="50px">
<template slot-scope="scope">
<el-radio v-model="currentInfo" :label="scope.row.id"><i></i></el-radio>
</template>
</el-table-column>
<el-table-column
prop="purchaseNo"
min-width="160px"
label="示例名称" >
</el-table-column >
</el-table>
clickChange对应的事件:
methods: {
clickChange (item) {
// 绑定选中的数据
this.currentInfo = item.id
// ...
// ...
},
// ...
}
使用的table事件是: current-change
element-ui文档对该事件的介绍:
解决方法: 修改table控件的触发事件 为行点击事件 row-click
修改后的代码:
<el-table
v-loading="loadingg"
:data="tableData" height="100%"
style="width: 100%"
:highlight-current-row="true"
@row-click="clickItem">
<el-table-column
label="选择"
width="50px">
<template slot-scope="scope">
<el-radio v-model="currentInfo" :label="scope.row.id"><i></i></el-radio>
</template>
</el-table-column>
<el-table-column
prop="purchaseNo"
min-width="160px"
label="示例名称" >
</el-table-column >
</el-table>
触发的事件:
methods: {
clickItem (row, event, column) {
// 先在data里定义好forbidden为true
if (!this.forbidden) {
this.forbidden = true
return
}
if (this.currentInfo) {
if (this.currentInfo == row.id) {
this.currentInfo = ''
//行点击后的 继续触发radio点击,禁止
this.forbidden = false
setTimeout(() => {
this.forbidden = true
}, 0)
return
} else {
this.forbidden = false
setTimeout(() => {
this.forbidden = true
}, 0)
}
} else {
this.forbidden = false
setTimeout(() => {
this.forbidden = true
}, 0)
}
// 绑定选中的数据
this.currentInfo = row.id
},
// ...
}
这里的代码已经兼容了ie11,如果是Chrome,不考虑ie11,可以简化点:
methods: {
clickItem (row, event, column) {
if (!this.forbidden) {
this.forbidden = true
return
}
if (this.currentInfo) {
if (this.currentInfo == row.id) {
this.currentInfo = ''
//行点击后的 继续触发radio点击,禁止
this.forbidden = false
setTimeout(() => {
this.forbidden = true
}, 0)
return
}
// 绑定选中的数据
this.currentInfo = row.id
},
// ...
}
效果图
参考链接
https://blog.youkuaiyun.com/qq_38374502/article/details/81034552#commentBox