el-table 翻页记忆

<el-input

placeholder="请输入关键词"

v-model="keyword"

maxlength="30"

v-on:keyup.enter.native="searcht()"

style="width:100%;height:100%;"

</el-input>

</div>

</div>

<el-scrollbar style="height:100%;width: 100%" ref="myScrollbar">

<el-table

:data="LayerTable"

style="width: 100%"

stripe

ref="multipleTable"

tooltip-effect="dark"

@select-all="selectAll"

@select="handleSelectionChange"

v-loading="loading"

<el-table-column type="selection" width="55"></el-table-column>

<el-table-column type="index" width="70" label="序号"></el-table-column>

<el-table-column prop="userName" label="姓名" show-overflow-tooltip></el-table-column>

<el-table-column prop="userAccount" label="账号 " show-overflow-tooltip></el-table-column>

<el-table-column prop="phoneNo" label="手机号 " show-overflow-tooltip></el-table-column>

<el-table-column prop="email" label="邮箱 " show-overflow-tooltip></el-table-column>

<el-table-column label="所属公司类型" show-overflow-tooltip width="130">

<template

slot-scope="scope"

>{{scope.row.userType=='0'?'系统用户':scope.row.userType=='1'?'内部用户':'外部用户'}}</template>

</el-table-column>

<el-table-column prop="companyName" label="所属公司" show-overflow-tooltip></el-table-column>

</el-table>

</el-scrollbar>

</div>

<div>

<img

src="/static/images/selectedcom.png"

style="width:24px;height:24px;margin-top:5px; "

</div>

<el-popover placement="top-start" width="761" trigger="click" v-model="visible">

<img

src="/static/images/close.png"

style="width:10px;height:10px;float:right;margin-right:11px;cursor:pointer"

@click="visible = false"

</div>

</div>

<img

src="/static/images/close.png"

style="width:11px;height:11px;float:right;margin-right:11px;cursor:pointer"

@click="visible = false"

</div>

<el-scrollbar style="height:100%;width: 100%">

<el-table :data="newtable" style="width: 100%" stripe tooltip-effect="dark">

<el-table-column type="index" width="70" label="序号"></el-table-column>

<el-table-column prop="userName" label="姓名" show-overflow-tooltip></el-table-column>

<el-table-column prop="userAccount" label="账号 " show-overflow-tooltip></el-table-column>

<el-table-column prop="phoneNo" label="手机号 " show-overflow-tooltip></el-table-column>

<el-table-column prop="email" label="邮箱 " show-overflow-tooltip></el-table-column>

<el-table-column label="所属公司类型" show-overflow-tooltip width="130">

<template

slot-scope="scope"

>{{scope.row.userType=='0'?'系统用户':scope.row.userType=='1'?'内部用户':'外部用户'}}</template>

</el-table-column>

<el-table-column prop="companyName" label="所属公司" show-overflow-tooltip></el-table-column>

<el-table-column label=" 操作 " width="70">

<span

@click="smalldeleteditem(scope.$index,scope.row)"

style="cursor:pointer;color:#2584ff;"

>删除</span>

</template>

</el-table-column>

</el-table>

</el-scrollbar>

</div>

<el-badge :value="num" slot="reference" :hidden="!num">

<el-button size="small" type="text" style="color: #687385;">已选成员</el-button>

</el-badge>

</el-popover>

</div>

<pagination

@size-change="handleSizeChange"

@current-change="handleCurrentChange"

:currentPage="pageInfo.page"

:pagesize="pageInfo.limit"

:total="pageInfo.total"

></pagination>

</div>

<el-button

size="small"

@click="layershow2(false,false)"

style="width:81px;height:36px;"

>取消</el-button>

</div>

<el-button

type="primary"

size="smmall"

style="width:81px;height:36px;"

@click="layershow2(false,false,10)"

>确定</el-button>

</div>

</template>

import Pagination from '@/components/Pagination.vue'

export default {

props: ['chosed'],

data () {

return {

// 搜索框绑定的值

keyword: '',

loading: true,

visible: false,

newtable: this.chosed || [],

LayerTable: [],

/* 分页 */

pageInfo: {

// 页码

page: 1,

// 每页显示的条数

limit: 20,

// 总共的条数

total: 100

}

components: {

Pagination

computed: {

num () {

return this.newtable.length

}

watch: {

keyword: function (val, oldval) {

console.log('keyword', val)

if (oldval !== val) {

this.searcht()

}

mounted () {

this.LayerTableMethod()

methods: {

layershow2 (boleen, num, item) {

this.$emit('layershow2', boleen, num, item, this.newtable)

this.visible = false

// 添加人员弹出框表格

LayerTableMethod () {

const params = {

queryCondition: this.keyword,

page: this.pageInfo.page,

limit: this.pageInfo.limit,

}

this.$http('/page/user/getList', params, 'POST').then(res => {

if (res.data.resultCode === '0000') {

if (this.$refs['myScrollbar']) {

this.$refs['myScrollbar'].wrap.scrollTop = 0

}

this.pageInfo.total = res.data.data.total

this.LayerTable = res.data.data.userList

this.loading = false

this.LayerTable.forEach((item, index) => {

item.visible = false

})

this.$nextTick(function () {

this.selectMemoriedDataFn()

})

}

})

// 添加人员搜索框搜索内容接口

searcht () {

const params = {

queryCondition: this.keyword,

page: 1,

limit: this.pageInfo.limit,

}

this.$http('/page/user/getList', params, 'POST').then(res => {

if (res.data.resultCode === '0000') {

this.pageInfo.total = res.data.data.total

this.LayerTable = res.data.data.userList

this.pageInfo.page = 1

this.LayerTable.forEach((item, index) => {

item.visible = false

})

console.log('LayerTable', this.LayerTable)

this.$nextTick(function () {

this.selectMemoriedDataFn()

})

}

})

handleSizeChange (val) {

this.pageInfo.limit = val

this.pageInfo.page = 1

this.LayerTableMethod()

handleCurrentChange (val) {

this.pageInfo.page = val

this.LayerTableMethod()

// 添加人员复选框方法

handleSelectionChange (row, index) {

let flag = true

for (const i of this.newtable) {

if (i.id === index.id) {

flag = false

}

// flag = i.id === index.id ? false : true

}

if (flag) {

this.newtable.push(index)

} else {

this.newtable.splice(this.newtable.findIndex(v => v.id === index.id), 1)

}

},

selectAll (selection) {

if (selection.length) {

selection.forEach(item => {

let flag = true

for (const i of this.newtable) {

console.log(i)

if (item.id === i.id) {

flag = false

}

}

if (flag) {

this.newtable.push(item)

}

})

} else {

if (this.LayerTable.length === this.newtable.length) {

this.newtable = []

return true

}

this.LayerTable.forEach(item => {

this.newtable.splice(this.newtable.findIndex(v => v.id === item.id), 1)

})

}

},

toggleSelection (index, flag) {

this.$refs.multipleTable.toggleRowSelection(this.LayerTable[index], flag)

},

selectMemoriedDataFn () {

this.newtable.forEach(row => {

this.LayerTable.forEach((item, index) => {

if (row.id === item.id) {

this.toggleSelection(index, true)

}

})

})

},

// 已选人数删除

smalldeleteditem (index, rowdata) {

this.newtable.splice(index, 1)

this.$nextTick(function () {

this.LayerTable.forEach((item, ind) => {

if (rowdata.id === item.id) {

this.toggleSelection(ind, false)

}

})

})

}

</script>

.Check_Box_Table {

width: 100%;

height: 100%;

}

.tableheader {

width: 100%;

height: 48px;

border-bottom: 2px solid #f7f8fc;

display: flex;

justify-content: space-between;

align-items: center;

padding: 0px 26px;

font-size: 14px;

color: #414656;

}

.tablemain {

width: calc(100% - 40px);

height: 400px;

margin: 20px 20px 0px 20px;

}

/*添加人员样式 */

.tablefooter {

width: 100%;

height: calc(100% - 470px);

border-radius: 6px;

}

.tablefootertop {

width: 100%;

height: 73px;

display: flex;

border-bottom: 2px solid #f7f8fc;

justify-content: space-between;

padding: 0px 10px 0px 44px;

}

.selectedperson {

width: 761px;

height: 246px;

background: #ffffff;

padding-top: 11px;

padding-left: 18px;

}

.selectedpersonTable {

width: calc(100% - 18px);

height: 200px;

margin-top: 11px;

margin-right: 18px;

}

.pagination {

padding-right: 5px;

}

</style>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,922评论 6赞 497
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,591评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 160,546评论 0赞 350
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,467评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,553评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,580评论 1赞 293
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,588评论 3赞 414
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,334评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,780评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,092评论 2赞 330
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,270评论 1赞 344
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,925评论 5赞 338
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,573评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,194评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,437评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,154评论 2赞 366
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,127评论 2赞 352

el-table 翻页记忆

推荐阅读更多精彩内容