vue实现弹窗翻页多选效果

第vue实现弹窗翻页多选效果本文实例为大家分享了vue实现弹窗翻页多选效果的具体代码，供大家参考，具体内容如下

点选择按钮后，弹出选择用户弹窗，可翻页勾多个用户

template

div

el-buttonsize="small"type="primary"@click="choose"选择/el-button

p

el-tagv-for="(item,index)inallSelectedUserList":key="index"

@close="removeUser(index)"

closable

{{}}

/el-tag

/p

el-dialog:visible.sync="dialogVisible"title="选择用户"v-if="dialogVisible"width="40%"append-to-body

s-tableref="table"@selectionChange="selectionChange"@loadData="loadData":data="tableData"

:config="tableConfig"/s-table

spanslot="footer"

el-button@click="dialogVisible=false"size="mini"取消/el-button

el-button@click="chooseConfirm"size="mini"type="primary"确定/el-button

/span

/el-dialog

/div

/template

script

exportdefault{

data(){

return{

dialogVisible:false,

//最终选中的所有数据

allSelectedUserList:[],

//最终选中的全部唯一字段列表

allUniquePropList:[],

//唯一字段

uniqueProp:'id',

//每次弹窗中选中的所有数据

allSelectedList:[],

tableData:[],

tableConfig:{

showSelect:true,

selectable:(row,rowIndex)={

if(this.allUniquePropList.indexOf(row[this.uniqueProp])===-1){

if(rowIndex===row.index){

returnfalse

}else{

returntrue

}

}

},

pageConfig:{

pageSizeList:[3,5,10],

pageSize:3,

currentPage:1,

total:0

},

itemList:[

{

label:'id',

prop:'id'

},

{

label:'姓名',

prop:'name'

},

{

label:'年龄',

prop:'age'

},

],

}

}

},

mounted(){

this.loadData()

},

methods:{

//点击选择按钮

choose(){

this.allUniquePropList=[]

this.allSelectedUserList.forEach(

item={

this.allUniquePropList.push(item[this.uniqueProp])

}

)

this.allSelectedList=[]

this.dialogVisible=true

},

//点击选择弹窗的确定按钮

chooseConfirm(){

this.allSelectedUserList=this.allSelectedUserList.concat(this.allSelectedList)

this.dialogVisible=false

},

//加载数据

loadData(newPageConfig){

if(newPageConfignewPageConfig.currentPage){

this.tableConfig.pageConfig.currentPage=newPageConfig.currentPage

}

if(newPageConfignewPageConfig.pageSize){

this.tableConfig.pageConfig.pageSize=newPageConfig.pageSize

}

this.$http.get("/user/pages",{

params:{

currentPage:this.tableConfig.pageConfig.currentPage,

pageSize:this.tableConfig.pageConfig.pageSize

}

})

.then(res={

letdata=res.data

this.tableData=data.records;

this.tableConfig.pageConfig.total=data.total

this.updateSelectedMark()

})

},

//改变多选列的选中状态时，更新选中列表

selectionChange(pageSelectedList){

//当页唯一字段组成的列表

letuniquePropList=[]

this.tableData.forEach(row={

uniquePropList.push(row[this.uniqueProp])

})

//从全部选中的数据中，过滤掉当前页的数据，再添加当前页选中的数据

this.allSelectedList=this.allSelectedList.filter(row=

!uniquePropList.includes(row[this.uniqueProp])

).concat(pageSelectedList)

},

//更新选中标记--选中数据与当页数据的交集，标记为选中状态

updateSelectedMark(){

this.$nextTick(

()={

letpageSelectedList=[]

this.allSelectedList.forEach(row1={

this.tableData.forEach(row2={

if(row1[this.uniqueProp]===row2[this.uniqueProp]){

pageSelectedList.push(row2)

}

})

})

pageSelectedList.forEach(row={

this.$refs.table.toggleRowSelection(row);

})

}

)

},

//移除选择的用户

removeUser(index){

this.allSelectedUserList.splice(index,1);

},

}

}

/script

stylescoped

/style

s-table全局表格组件

template

div

el-table

ref="table"

@select="rowSelectChange"

@select-all="pageSelectChange"

@row-click="getCurrentRow"

:data="data"

border

:highlight-current-row="!config.closeHighlightRow"

empty-text="暂无数据"

el-table-column

:selectable="config.selectable"

v-if="config.showSelect"

type="selection"

width="55"

/el-table-column

el-table-column

:align="item.alignitem.align:'center'"

:label=item.label

:prop=p

:min-width="item.minWidthitem.minWidth:'120'"

:formatter="item.formatter"

v-for="(item,index)inconfig.itemList"

:key="index"

/el-table-column

slotname="操作"

/slot

/el-table

!--分页--

div

el-pagination

:current="config.pageConfig.currentPage"

:size="config.pageConfig.pageSize"

:sizes="config.pageConfig.pageSizeList"

:total="config.pageConfig.total"

@current-change="currentPageChange"

@size-change="pageSizeChange"

layout="total,sizes,prev,pager,next,jumper"

/el-pagination

/div

/div

/template

script

exportdefault{

props:{

data:Array,

config:Object,

selectable:Function

},

data(){

return{}

},

methods:{

rowSelectChange(pageSelected,row){

this.$emit('selectionChange',

pageSelected,

)

},

pageSelectChange(pageSelected){

this.$emit('selectionChange',p