增加selection列，使用filter实现搜索功能，搜索前选中的行，搜索后仍被选中，这个是bug还是做了处理 #85
Comments
|
这个效果类似于el-table-column的reserve-selection，相当于是默认就设置了这个效果么 |
相当于默认就设置了这个效果，选中状态跟列表数据做了绑定，数据没删除，状态就会保留 |
|
不过还有个问题，就是如果原先选中了几行，点击搜索，搜索内容不包括这几行，表头的选中状态是空白的，原始的el-table，表头有选中状态 |
多选有用VirtualColumn 组件吗 |
|
截图的是原始的el-table，我有使用VirtualColumn，表头的选中状态在不引入搜索前是没问题的，就是用了搜索后，绑定的数据来回filter，选中状态会和原始的el-table有些出入 |
有demo吗，我不知道要怎么复现 |
<template>
<el-row :gutter="10">
<virtual-scroll :data="tableData"
:itemSize="36"
key-prop="date"
@change="(renderData) => virtualTableData = renderData"
@selection-change="onSelectionChange">
<el-table :header-cell-style="{'background': '#DCDFE6', 'text-align': 'center'}"
style="font-size: 10px; width: 100%"
border
:height="500"
:data="virtualTableData"
row-key="date"
fit
size="mini">
<virtual-column width="50"
type="selection"
align=center>
</virtual-column>
<el-table-column label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column align="right">
<template slot="header">
<el-input @input="searchChange"
v-model="search"
size="mini"
placeholder="输入关键字搜索" />
</template>
<template>
<el-button size="mini">Edit
</el-button>
<el-button size="mini"
type="danger">Delete
</el-button>
</template>
</el-table-column>
</el-table>
</virtual-scroll>
</el-row>
</template>
<script>
import VirtualScroll from 'el-table-virtual-scroll'
import { VirtualColumn } from 'el-table-virtual-scroll'
export default {
name: 'test',
components: {
VirtualScroll,
VirtualColumn
},
data () {
return {
search: '',
originArr: [{
date: '2016-05-03',
name: '1',
}, {
date: '2016-05-02',
name: '2',
}, {
date: '2016-05-04',
name: '3',
}, {
date: '2016-05-01',
name: '4',
}, {
date: '2016-05-08',
name: '5',
}, {
date: '2016-05-06',
name: '6',
}, {
date: '2016-05-07',
name: '王小虎',
}],
tableData: [],
virtualTableData: [],
selection: []
}
},
methods: {
onSelectionChange (val) {
this.selection = val
},
searchChange (val) {
const search = val.toLowerCase()
this.tableData = this.originArr.filter((item) => item.name.toLowerCase().includes(search))
}
},
created () {
this.tableData = this.originArr
}
};
</script> |
|
效果就是这样： |
|
最后还有个问题就是，原始的el-table，开启了reserve-selection后，多次搜索，然后勾选，selection-change监听到的数据是增量的，虚拟列表该事件监听到的是当前的，这个不知道能优化么，要不就得自己维护了 |
晚点看看能不能兼容这种情况 |
|
好的 |
改动有点大，可能要这两天才能发新版本 |
|
还有个问题想问下，就是排序不是需要按照demo实现么，我照着demo改了，然后发现了一个问题，比如有两列数据，我点击猎头的sortable，降序排序，然后在tableData后，concate了一个数组，并手动调用sort对tableData重新排序，tableData更新后，表格的数据不再有序了。需要重新点击列头的排序才会生效。demo如下： <template>
<el-row :gutter="10">
<el-button @click="update">
更新
</el-button>
<virtual-scroll :data="tableData"
:itemSize="36"
key-prop="ID"
@change="(renderData) => virtualTableData = renderData"
@selection-change="onSelectionChange">
<el-table :header-cell-style="{'background': '#DCDFE6', 'text-align': 'center'}"
style="font-size: 10px; width: 100%"
border
:height="500"
:data="virtualTableData"
row-key="ID"
fit
size="mini"
@sort-change="onSortChange">
<virtual-column width="50"
type="selection"
align=center>
</virtual-column>
<el-table-column prop="ID"
label="ID"
width="120"
sortable>
</el-table-column>
<el-table-column prop="Name"
label="姓名"
width="120"
sortable>
</el-table-column>
<el-table-column align="right">
<template slot="header">
<el-input @input="searchChange"
v-model="search"
size="mini"
placeholder="输入关键字搜索" />
</template>
<template>
<el-button size="mini">Edit
</el-button>
<el-button size="mini"
type="danger">Delete
</el-button>
</template>
</el-table-column>
</el-table>
</virtual-scroll>
</el-row>
</template>
<script>
import VirtualScroll from 'el-table-virtual-scroll'
import { VirtualColumn } from 'el-table-virtual-scroll'
export default {
name: 'test',
components: {
VirtualScroll,
VirtualColumn
},
data () {
return {
search: '',
originArr: [],
tableData: [],
virtualTableData: [],
selection: []
}
},
methods: {
onSelectionChange (val) {
this.selection = val
},
searchChange (val) {
const search = val.toLowerCase()
this.tableData = this.originArr.filter((item) => item.Name.toLowerCase().includes(search))
},
onSortChange ({ prop, order }) {
if (order) {
this.tableData.sort((a, b) => {
if (order === 'ascending') {
return a[prop] > b[prop] ? 1 : -1
} else if (order === 'descending') {
return b[prop] > a[prop] ? 1 : -1
}
})
}
},
update () {
this.originArr = this.originArr.concat([{ ID: 60, Name: '60' }])
this.tableData = this.originArr
this.tableData = this.tableData.sort((a, b) => {
return a.ID > b.ID ? 1 : -1
})
console.log('tableData', this.tableData)
}
},
created () {
for (let i = 0; i < 50; i++) {
this.originArr.push({ ID: i + 1, Name: (i + 1).toString() })
}
for (let i = 90; i < 100; i++) {
this.originArr.push({ ID: i + 1, Name: (i + 1).toString() })
}
this.tableData = this.originArr
}
};
</script>点击demo的更新按钮，就能复现上面的效果，我想问下是我更新的操作有误还是组件的bug |
我会改成用法el-table的过滤一样，不用做其他兼容写法 |
|
改好了，升到1.3.0版本 |
xiaocheng555
added a commit
that referenced
this issue
Jun 5, 2024
筛选和reserve-selection参考这两个demo |
|
好的，我试试 |
ok不，ok我关issue了 |
|
ok了，谢谢🙏 |
可以升级到1.3.1，上个版本有点bug |
表头的全选有bug，要升级到1.3.1 |
|
好的，升级了，我刚看到还支持了clearSort，刚好要用，哈哈哈 |
|
clearSelection在列设置为reserve-selection时，清除的是当前选中的行，不是全部选中的。比如说，我有一个搜索框，一开始选择一行，输入搜索内容后表格过滤，然后选择一行，这个时候清除，清除掉了当前的，我清空搜索框，第一个被选中的没有被清除掉。下面又个demo，和el-table对比的。不知道这个算不算bug： <template>
<div>
<el-row>
<el-button @click="clear1">清除1</el-button>
<el-button @click="clear2">清除2</el-button>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<virtual-scroll ref="leftTable"
:data="tableData"
:itemSize="36"
key-prop="ID"
@change="(renderData) => virtualTableData = renderData"
@selection-change="onSelectionChange">
<el-table :header-cell-style="{'background': '#DCDFE6', 'text-align': 'center'}"
style="font-size: 10px; width: 100%"
border
:height="500"
:data="virtualTableData"
row-key="ID"
fit
size="mini"
@sort-change="onSortChange">
<virtual-column width="50"
type="selection"
align=center
reserve-selection>
</virtual-column>
<el-table-column prop="ID"
label="ID"
width="120"
sortable>
</el-table-column>
<el-table-column prop="Name"
label="姓名"
width="120"
sortable>
</el-table-column>
<el-table-column align="right">
<template slot="header">
<el-input @input="searchChange"
v-model="search"
size="mini"
placeholder="输入关键字搜索" />
</template>
<template>
<el-button size="mini">Edit
</el-button>
<el-button size="mini"
type="danger">Delete
</el-button>
</template>
</el-table-column>
</el-table>
</virtual-scroll>
</el-col>
<el-col :span="12">
<el-table ref="rightTable"
:header-cell-style="{'background': '#DCDFE6', 'text-align': 'center'}"
style="font-size: 10px; width: 100%"
border
:height="500"
:data="tableData2"
row-key="ID"
fit
size="mini">
<el-table-column width="50"
type="selection"
align=center
reserve-selection>
</el-table-column>
<el-table-column prop="ID"
label="ID"
width="120"
sortable>
</el-table-column>
<el-table-column prop="Name"
label="姓名"
width="120"
sortable>
</el-table-column>
<el-table-column align="right">
<template slot="header">
<el-input @input="searchChange2"
v-model="search2"
size="mini"
placeholder="输入关键字搜索" />
</template>
<template>
<el-button size="mini">Edit
</el-button>
<el-button size="mini"
type="danger">Delete
</el-button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
</div>
</template>
<script>
import VirtualScroll from 'el-table-virtual-scroll'
import { VirtualColumn } from 'el-table-virtual-scroll'
export default {
name: 'test',
components: {
VirtualScroll,
VirtualColumn
},
data () {
return {
search: '',
search2: '',
originArr: [],
tableData: [],
virtualTableData: [],
selection: [],
tableData2: [],
count: 60,
}
},
methods: {
onSelectionChange (val) {
this.selection = val
},
searchChange (val) {
const search = val.toLowerCase()
this.tableData = this.originArr.filter((item) => item.Name.toLowerCase().includes(search))
},
searchChange2 (val) {
const search = val.toLowerCase()
this.tableData2 = this.originArr.filter((item) => item.Name.toLowerCase().includes(search))
},
onSortChange ({ prop, order }) {
if (order) {
this.tableData.sort((a, b) => {
if (order === 'ascending') {
return a[prop] > b[prop] ? 1 : -1
} else if (order === 'descending') {
return b[prop] > a[prop] ? 1 : -1
}
})
}
},
clear1 () {
this.$refs.leftTable.clearSelection()
},
clear2 () {
this.$refs.rightTable.clearSelection()
},
update () {
// this.originArr = this.originArr.concat([{ ID: this.count++, Name: '60' }]).sort((a, b) => {
// return a.ID > b.ID ? 1 : -1
// })
// this.tableData = [...this.originArr]
// this.tableData2 = [...this.originArr]
// console.log('tableData', this.tableData)
// console.log('tableData2', this.tableData2)
}
},
created () {
for (let i = 0; i < 50; i++) {
this.originArr.push({ ID: i + 1, Name: (i + 1).toString() })
}
for (let i = 90; i < 100; i++) {
this.originArr.push({ ID: i + 1, Name: (i + 1).toString() })
}
this.tableData = [...this.originArr]
this.tableData2 = [...this.originArr]
}
};
</script> |
我这边查看的demo，el-table的clearSelection方法就是清除全部选中项，不是筛选后的全部选中项 |
|
应该是清除全部的，但现在的el-table-virtual-scroll的clearSeletion清除的是筛选后的 |
|
demo这么操作，左右都先选中1，然后左右都搜索2，选中2，然后分别点击清除1和清除2，把输入框内容清除掉，回车，virtual-table的1还是选中状态，el-table是全部清除了 |
好的，我修复下 |
修复了，升级到1.4.2 |
|
好的，刚才试了可以了 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
No description provided.
The text was updated successfully, but these errors were encountered: