1.通过查看antd文档,customRow可设置行属性:
<template>
<div>
<a-table :rowKey="record => record.id" :customRow="customRow" :row-selection="{ selectedRowKeys: selectedRowKeys, type: selectionRef, onChange: onSelectChange }" :scroll="{ x: 1400 }" :columns="fields" :dataSource="data" :pagination="false"> </a-table>
</div>
</template>
<script>
export default {
props: {
selectionRef: {
type:'String',
default:'radio'
}
data(){
return{
fields:[],
data:[],
selectedRowKeys:[],
selectedRowItems:[],
selectItem:[],
}
},
methods:{
customRow(record) {
return {
on: {
click: event => {
if (this.selectionRef == "radio") {
const keys = [];
const items = [];
keys.push(record.id);
items.push(record);
this.onSelectChange(keys, items);
} else {
const indexRow = this.selectedRowKeys.indexOf(record.id);
indexRow === -1 ? this.selectedRowKeys.push(record.id) : this.selectedRowKeys.splice(indexRow, 1);
if (indexRow === -1) {
this.selectedRowItems.push(record);
} else {
this.selectedRowItems.splice(indexRow, 1);
}
console.log(this.selectedRowItems);
this.selectItem = this.selectedRowItems;
}
},
dblclick:(event) => {
if (this.selectionRef=='radio') {
const keys = [];
const items = [];
keys.push(record.id);
items.push(record);
this.onSelectChange(keys, items);
this.$nextTick(() => {
this.handelOk();
})
}
}
}
};
},
onSelectChange(keys, items) {
console.log("item", items);
this.selectedRowKeys = keys;
this.selectItem = items;
},
handelOk(){}
}
}
</script>
|