|
@@ -157,7 +157,8 @@ export default {
|
|
|
showQuickJumper: false
|
|
|
}, this.pagination),
|
|
|
// 选中的项
|
|
|
- selectedRowKeys: []
|
|
|
+ selectedRowKeys: [],
|
|
|
+ selectedRows: []
|
|
|
}
|
|
|
},
|
|
|
created () {
|
|
@@ -168,20 +169,48 @@ export default {
|
|
|
methods: {
|
|
|
// 选择单元格
|
|
|
selectedRowChange ({ row, isSelected, selectedRowKeys }) {
|
|
|
+ console.log(isSelected, selectedRowKeys)
|
|
|
+ // 选中
|
|
|
+ if (isSelected) {
|
|
|
+ this.selectedRows.push(row)
|
|
|
+ } else {
|
|
|
+ // 取消
|
|
|
+ this.selectedRows = this.selectedRows.filter(item => item[this.rowKeyName] !== row[this.rowKeyName])
|
|
|
+ }
|
|
|
this.selectedRowKeys = selectedRowKeys
|
|
|
this.onRowSelection()
|
|
|
this.$emit('selectRowChange', { row, isSelected, selectedRowKeys })
|
|
|
},
|
|
|
- // 全选行
|
|
|
+ // 全选或取消本页行
|
|
|
selectedAllChange ({ isSelected, selectedRowKeys }) {
|
|
|
- this.selectedRowKeys = selectedRowKeys
|
|
|
+ console.log(isSelected, selectedRowKeys)
|
|
|
+ // 全选
|
|
|
+ if (isSelected) {
|
|
|
+ // 合并数组,并去重
|
|
|
+ this.selectedRowKeys = this.selectedRowKeys.concat(selectedRowKeys).reduce((prev, next) => {
|
|
|
+ if (!prev.find(item => item === next)) {
|
|
|
+ prev.push(next)
|
|
|
+ }
|
|
|
+ return prev
|
|
|
+ }, [])
|
|
|
+ this.selectedRows = this.selectedRows.concat(this.localDataSource).reduce((prev, next) => {
|
|
|
+ if (!prev.find(item => item[this.rowKeyName] === next[this.rowKeyName])) {
|
|
|
+ prev.push(next)
|
|
|
+ }
|
|
|
+ return prev
|
|
|
+ }, [])
|
|
|
+ } else {
|
|
|
+ // 取消全选,删除当前页选项
|
|
|
+ const changeRowKeys = this.localDataSource.map(item => item[this.rowKeyName])
|
|
|
+ this.selectedRowKeys = this.selectedRowKeys.filter(item => !changeRowKeys.includes(item))
|
|
|
+ this.selectedRows = this.selectedRows.filter(item => !changeRowKeys.includes(item[this.rowKeyName]))
|
|
|
+ }
|
|
|
this.onRowSelection()
|
|
|
this.$emit('selectAllRowChange', { isSelected, selectedRowKeys })
|
|
|
},
|
|
|
// 触发已选项事件
|
|
|
onRowSelection () {
|
|
|
- const selectedRows = this.localDataSource.filter(item => this.selectedRowKeys.includes(item[this.rowKeyName]))
|
|
|
- this.$emit('rowSelection', { selectedRows: selectedRows, selectedRowKeys: this.selectedRowKeys })
|
|
|
+ this.$emit('rowSelection', { selectedRows: this.selectedRows, selectedRowKeys: this.selectedRowKeys })
|
|
|
},
|
|
|
// 通过key.key...获取属性值
|
|
|
getNestedPropertyValue (obj, path) {
|
|
@@ -222,7 +251,7 @@ export default {
|
|
|
scopedSlotsKey: item.scopedSlots && item.scopedSlots.customRender,
|
|
|
hasEllipsis: item.ellipsis,
|
|
|
renderBodyCell: ({ row, column, rowIndex }, h) => {
|
|
|
- // 如果filed 是obj.objkey.objkey...形式
|
|
|
+ // 如果field 是obj.objkey.objkey...形式
|
|
|
const text = column.field ? (column.field.indexOf('.') >= 0 ? _this.getNestedPropertyValue(row, column.field) : row[column.field]) : null
|
|
|
// 有自定义单元格
|
|
|
if (column.scopedSlotsKey) {
|
|
@@ -244,7 +273,7 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
// 判断是否开启多选框
|
|
|
- const hasCheckbox = columns.find(item => item.type == 'checkbox')
|
|
|
+ const hasCheckbox = ret.find(item => item.type == 'checkbox')
|
|
|
// 兼容老版本表格
|
|
|
if (!hasCheckbox && this.rowSelection) {
|
|
|
ret.unshift({ title: '', field: 'checkbox', key: 'checkbox', width: 30, type: 'checkbox', align: 'center' })
|