121 lines
2.7 KiB
Vue
121 lines
2.7 KiB
Vue
<template>
|
|
<a-table
|
|
class="custom-table"
|
|
v-bind="$attrs"
|
|
:data-source="list"
|
|
:columns="columns"
|
|
:size="size"
|
|
:row-key="rowKey"
|
|
:loading="loading"
|
|
:pagination="pagination"
|
|
:customRow="customRow"
|
|
:rowClassName="() => canSelect? 'custom-table-row': ''"
|
|
@change="handleTableChange"
|
|
>
|
|
<!-- 处理 scopedSlots -->
|
|
<template v-for="slotName of scopedSlotsKeys" :slot="slotName" slot-scope="text, record, index">
|
|
<slot :name="slotName" :text="text" :record="record" :index="index"></slot>
|
|
</template>
|
|
</a-table>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
columns: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'middle'
|
|
},
|
|
rowKey: {
|
|
type: String,
|
|
default: 'id'
|
|
},
|
|
loading: {
|
|
type: Boolean
|
|
},
|
|
pagination: {
|
|
type: [Object, Boolean]
|
|
},
|
|
selectedRowKeys: {
|
|
type: Array
|
|
},
|
|
selectionRows: {
|
|
type: Array
|
|
},
|
|
canSelect: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
innerSelectedRowKeys: [],
|
|
innerSelectedRows: []
|
|
}
|
|
},
|
|
methods: {
|
|
// 实现单击选中/反选功能
|
|
customRow(record) {
|
|
const key = record[this.rowKey]
|
|
return {
|
|
class: this.innerSelectedRowKeys.includes(key) ? 'ant-table-row-selected' : '',
|
|
on: {
|
|
click: () => {
|
|
if(!this.canSelect) {
|
|
return
|
|
}
|
|
if (this.innerSelectedRowKeys.includes(key)) {
|
|
const findIndex = this.innerSelectedRowKeys.findIndex(k => k == key)
|
|
this.innerSelectedRowKeys.splice(findIndex, 1)
|
|
} else {
|
|
if(this.multiple) {
|
|
this.innerSelectedRowKeys.push(key)
|
|
}
|
|
else {
|
|
this.innerSelectedRowKeys = [key]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
handleTableChange(pagination, filters, sorter) {
|
|
this.$emit('change', pagination, filters, sorter)
|
|
}
|
|
},
|
|
watch: {
|
|
selectedRowKeys (val) {
|
|
this.innerSelectedRowKeys = val
|
|
},
|
|
innerSelectedRowKeys () {
|
|
this.$emit('update:selectedRowKeys', this.innerSelectedRowKeys)
|
|
this.innerSelectedRows = this.innerSelectedRowKeys.map((key) => {
|
|
return this.list.find(item => item[this.rowKey] === key)
|
|
})
|
|
this.$emit('update:selectionRows', this.innerSelectedRows)
|
|
}
|
|
},
|
|
computed: {
|
|
scopedSlotsKeys() {
|
|
return Object.keys(this.$scopedSlots)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less">
|
|
.custom-table-row {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|