<template>
<div>
<el-dialog
:title="`包含素材类型`"
:visible.sync="visible"
width="60%"
center
append-to-body
:before-close="handleClose"
>
<div
class="box"
v-loading="tableLoading"
>
<!-- 内容区域 -->
<div class="contend">
<el-table
:data="tableData"
ref="multipleTable"
stripe
border
style="width: 100%"
@select="handleSelectionChange"
@select-all="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
>
</el-table-column>
<el-table-column
prop="id"
label="id"
align="center"
width="100"
>
</el-table-column>
<el-table-column
prop="name"
label="名称"
align="center"
min-width="250"
>
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<Pagination
v-if="tableData.length > 0"
:total.sync="pagination.total"
:page.sync="pagination.page"
:page_size.sync="pagination.page_size"
@paginationChange="paginationChange"
></Pagination>
</div>
<div class="flex mt40">
<el-button
size="mini"
type="primary"
style="marginRight: 100px"
@click="submit('ruleForm')"
>确 定</el-button>
<el-button
size="mini"
@click="handleClose"
>取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getPaletteTypeList } from '@/api/product.js'
import _ from 'lodash'
import Pagination from '@/components/pagination/index.vue'
export default {
data () {
return {
tableLoading: false,
tableData: [],
// 分页器
pagination: {
total: 300,
page: 1,
page_size: 10
},
// 批量移除
aboutBatchDele: {
deleArr: [],
singlePage: []
}
}
},
watch: {
visible () {
if (this.visible) {
this.pagination.page = 1
this.pagination.page_size = 10
this.getData({ page: this.pagination.page, page_size: this.pagination.page_size })
this.aboutBatchDele.deleArr = this.propData
}
}
},
props: {
visible: {
type: Boolean
},
propData: {
type: Array
},
},
methods: {
// 原始获取数据
async getData (obj) {
let results = await getPaletteTypeList({ ...obj })
console.log(results)
if (results.data.code === 200 && results.data.msg === 'OK') {
this.tableData = _.cloneDeep(results.data.data)
this.managesinglePageForDele(_.cloneDeep(results.data.data))
this.pagination.total = results.data.page.total
}
},
// 分页获取数据
paginationChange (page, pageSize) {
this.getData({
page,
page_size: pageSize
})
},
// 多选修改
handleSelectionChange (val) {
// this.aboutBatchDele.singlePage = val.map(item => item.id)
// 整理当前页是删除的id
let valItem = val.map(item => {
return item.id
})
// 修改当前页是删除功能的
this.aboutBatchDele.singlePage.forEach(item => {
if (valItem.includes(item.id)) {
item.isDele = true
this.manageDeleArr(item.id, true)
} else {
item.isDele = false
this.manageDeleArr(item.id, false)
}
})
console.log(this.aboutBatchDele.deleArr);
},
manageDeleArr (id, status) {
let valItem = this.aboutBatchDele.deleArr
if (status) {
// 入移除部分
if (!valItem.includes(id)) {
this.aboutBatchDele.deleArr.push(id)
}
} else {
// 不需要移除部分
this.aboutBatchDele.deleArr = valItem.filter(item => {
if (item !== id) return true
})
}
},
managesinglePageForDele (Arr) {
this.aboutBatchDele.singlePage = Arr
console.log(this.aboutBatchDele.deleArr);
this.aboutBatchDele.singlePage.forEach(item => {
if (this.aboutBatchDele.deleArr.includes(item.id)) {
item.isDele = false
} else {
item.isDele = true
}
})
// 更新页面
this.$nextTick(() => {
let valItem = this.aboutBatchDele.deleArr
this.tableData.forEach(item => {
if (valItem.includes(item.id)) {
this.$refs.multipleTable.toggleRowSelection(item);
}
})
})
},
// 关闭
handleClose () {
this.$emit('change', false)
this.$emit('update:visible', false)
},
submit () {
console.log(this.aboutBatchDele.deleArr);
this.$emit('change', this.aboutBatchDele.deleArr)
this.$emit('update:visible', false)
},
},
components: {
Pagination
}
}
</script>
<style scoped lang="less">
.box {
padding: 15px 15px;
}
.topSearch {
background-color: #fff;
border-radius: 10px;
}
</style>
el-table支持分页多选
最新推荐文章于 2024-05-13 09:58:20 发布