<template> <div> <el-dialog :title="reciveForm.title" width="1000px" :close-on-click-modal="false" :append-to-body="true" v-dialogDrag class="userDialog" :visible.sync="visible"> <el-container style="height: 500px"> <el-container> <el-header style="text-align: left; font-size: 12px; height: 30px"> <el-form size="small" :inline="true" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent> <el-form-item prop="param" label="名称/编号"> <el-input size="small" v-model="searchForm.search" placeholder="输入名称/编号查询" clearable></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="refreshList()" size="small" icon="el-icon-search">查询</el-button> <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button> </el-form-item> </el-form> </el-header> <el-main> <el-table :data="dataList" v-loading="loading" size="small" border ref="contractTable" @select="handleSelectionChange" @row-click="rowSelect" height="calc(100% - 40px)" style="width: 100%"> <el-table-column type="selection" header-align="center" align="center" width="50"> </el-table-column> <el-table-column prop="id" header-align="center" align="center" sortable="custom" min-width="90" label="id"> </el-table-column> <el-table-column prop="name" header-align="center" align="center" sortable="custom" min-width="90" label="名称"> </el-table-column> </el-table> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="searchForm.pageNo" :page-sizes="[5, 10, 15, 20]" :page-size="searchForm.pageSize" :total="total" layout="total, sizes, prev, pager, next, jumper"> </el-pagination> </el-main> </el-container> </el-container> <span slot="footer"> <el-button size="small" @click="visible = false" icon="el-icon-circle-close">关闭</el-button> <el-button size="small" type="primary" icon="el-icon-circle-check" @click="doSubmit()">确定</el-button> </span> </el-dialog> </div> </template> <script> import { getBatchRefer } from '@/api/purchase/basic' export default { data() { return { searchForm: { search: '', pageNo: 1, pageSize: 10, }, reciveForm: {}, dataListAllSelections: [], // 所有选中的数据包含跨页数据 idKey: "id", // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下) dataList: [], total: 0, orders: [], loading: false, visible: false, }; }, props: { selectData: { type: Array, default: () => { return []; }, }, // 是否启用单选 single: { type: Boolean, default: false } }, methods: { init(val) { this.visible = true; console.log("🚀 ~ file: refers.vue:79 ~ init ~ init(val):", val) this.reciveForm = val this.searchForm.search = '' this.$nextTick(() => { this.dataListAllSelections = JSON.parse(JSON.stringify(this.selectData)); this.resetSearch(); }); }, // 获取数据列表 refreshList() { this.loading = true; let params = { ...this.searchForm, ...this.reciveForm } getBatchRefer(params).then(res => { console.log('res', res) this.dataList = res.rows; this.total = res.total this.loading = false; this.$nextTick(() => { this.setSelectRow(); }); }); }, // 每页数 sizeChangeHandle(val) { this.searchForm.pageSize = val; this.refreshList(); }, // 当前页 currentChangeHandle(val) { this.searchForm.pageNo = val; this.refreshList(); }, // 排序 resetSearch() { this.searchForm.pageNo = 1 this.searchForm.search = '' this.refreshList(); }, // 表格选中数据 rowSelect(row, column, event) { this.$refs.contractTable.clearSelection(); this.$refs.contractTable.toggleRowSelection(row); this.dataListAllSelections = this.single ? [row] : selection }, // 选中数据 handleSelectionChange(selection, row) { if (this.single && selection.length > 1) { this.$refs.contractTable.clearSelection(); this.$refs.contractTable.toggleRowSelection(row); } this.dataListAllSelections = this.single ? [row] : selection }, // 设置选中的方法 setSelectRow() { this.$refs.contractTable.clearSelection(); if (!this.dataListAllSelections || this.dataListAllSelections.length <= 0) { return; } for (let i = 0; i < this.dataList.length; i++) { if (this.dataListAllSelections.some(item => item[this.idKey] == this.dataList[i][this.idKey])) { // 设置选中,记住table组件需要使用ref="table" this.$refs.contractTable.toggleRowSelection(this.dataList[i], true); } } }, doSubmit() { this.visible = false; console.log('选择的数据?', this.dataListAllSelections) this.$emit("doSubmit", this.dataListAllSelections); }, }, }; </script> <style lang="scss"> .userDialog { .el-dialog__body { padding: 10px 0px 0px 10px; color: #606266; font-size: 14px; word-break: break-all; } .el-main { padding: 20px 20px 5px 20px; .el-pagination { margin-top: 5px; } } } </style>