写在前面的话
第一次发文,小弟才疏学浅,各位看官,小心轻踩,如有错误,还请大神们指教一二。 最近在用iview+vue全家桶做项目,期间遇到了一些问题,下面是我的一点点心得。OK,废话少说,直接进入正题
问题
下面是iview的Table组件方法:
相信细心的朋友们会发现,在多选模式下,竟然没有“取消全选”的事件,所以当我有点击“取消全选”时去操作数据的需求时怎么办?解决问题
其实很简单,它给到我们一个on-selection-change
事件,这个事件会返回所有已选数据selection
数组,那么我们利用这个事件可以很方便的模拟出“取消全选”事件
cancelSelectAll(selection) {
if (!selection.length) {
//这里就可以写我们的取消全选事件逻辑了
}
},
后话
如果你有个这样的需求:用户通过分页和多选框任意操作去选择数据,最后点击“确认”按钮弹出用户所选所有数据。其实
on-selection-change
事件还可以这样玩
这时正常的思路一般会然后通过iview的事件方法:
on-select
选中某一项方法,
on-select-cancel
取消某一项方法,
on-select-all
点击全选方法,
还有我上面提到的模拟"取消全选"方法
去往selectDataStore
数组里扔数据
下面贴代码
html
<blockquote>
<Button type="info" size="large" @click="back">返回上一步</Button>
<Button type="success" size="large" class="bth" @click="determine">确定</Button>
</blockquote>
<div style="overflow: hidden">
<Table border
:loading="loading"
:columns="columns"
:data="data"
@on-select="selectItem"
@on-select-cancel="cancelItem"
@on-select-all="selectItemAll"
@on-selection-change="selectChange"></Table>
<div style="float: right;margin:1% 0">
<Page :total="total" show-total @on-change="changePage"></Page>
</div>
</div>
js
export default:{
data() {
return {
selectDataStore:[] //建一个数据仓库
currentPage:1
}
},
methods:{
changePage (val) { //翻页事件,返回改变后的页码
this.currentPage = val
},
selectItem(selection, row) {
this.selectDataStore.push(row)
},
cancelItem(selection, row) {
this.selectDataStore.forEach((item, index) => {
if (item.regNo === row.regNo) { //这里我数据中regNo是唯一的,所以拿来做判断条件
this.selectDataStore.splice(index, 1)
}
})
},
selectItemAll(selection) {
this.selectDataStore = this.selectDataStore.concat(selection)
},
selectChange(selection) {
if (!selection.length) {
let arr1 = this.selectDataStore
let arr2 = this.data
for (let i = 0; i < arr1.length; i++) {
for (let j = 0; j < arr2.length; j++) {
if (arr1[i].regNo === arr2[j].regNo) {
this.selectDataStore.splice(i, 1)
}
}
}
}
},
determine() {
//这时this.selectDataStore已经是拿到的全部数据
}
}
}
其实如果需求简单,这里一个on-selection-change
事件就可以搞定:
export default{
data() {
return {
selectDataStore:[] //建一个数据仓库
dataStoreTo:[] //建立一个中间数据仓库
currentPage:1 //表格页数
}
},
methods:{
changePage (val) { //翻页事件,返回改变后的页码
this.currentPage = val
},
selectChange(selection) { //因为此事件总会返回当前页(有分页操作时)用户所选所有数据,利用这个特点我们就可以建立一个对象去记录每页用户所选数据
let pageDataStore = {
page: this.currentPage, //当前操作页数
dataArr: selection //当前操作页用户选择的数据
}
this.dataStoreTo[this.currentPage - 1] = pageDataStore //丢给中间数据仓库(记录下位置,用以解决数据覆盖问题)
},
determine() {
this.selectDataStore = []
this.dataStoreTo.forEach((item, index) => {
this.selectDataStore = this.selectDataStore.concat(this.dataStoreTo[index].dataArr)
}) //这样也拿到了用户所选全部数据this.selectDataStore
}
}
}
怎么样,用一个方法就解决了需求,不过如果操作和需求复杂的话,这个方法就感觉不太适合了,操作的数据复杂度会更高,而且还很容易出错,有空的朋友可以试试,如果大家有什么更好的方法和建议,欢迎评论,本人菜鸟一枚,多多包涵哈···