#封装dialog小案例

提示：这是我工作中封装的代码，很使用，需要的可以拿去，
在我们的代码中往往会出现点击按钮出现弹窗进行操作，那么我们就需要对dialog进行一个二次封装。
下边是大概的一个样式。

##对组件进行二次封装

<template><el-dialogtitle="客户账号查询":visible.sync="dialogVisible":append-to-body="true":close-on-click-modal="false"width="900px"@close="closeClick">//   :inline="true"  这个是是否行内模式    label-position="right" 提示的内容在右侧显示//   <div class="filter_assert_account_comp"><el-formv-if="this.dialogQuery && dialogQuery.length > 0"ref="ruleForm":inline="true"label-position="right"class="ruleForm"style="margin-bottom: 10px"><el-row><el-col v-for="item in this.dialogQuery" :key="item.label" :span="10"><el-form-item :label="item.label">//本身queryParams是一个对象，我们需要知道的是通过对象才能够去作为接口的传参<el-input v-model="queryParams[item.value]" clearable /></el-form-item></el-col><el-col :span="4"><el-form-item>//:loading="searchLoading"  是否加载中状态   type="primary"<el-button icon="el-icon-search" :loading="searchLoading" type="primary" @click="queryAcct">查询</el-button></el-form-item></el-col></el-row></el-form><tableListref="table":options="options":pagination="dialogPageInfo":header-data="dialogColumns":table-data="tableData":select-one="true"@requestList="dialogDoPage"@rowClick="getRowClick"@handleSelectionChange="handleSelectionChange"@handleRowSelect="handleRowSelect"/></div><div v-if="isMultiSelect" slot="footer" class="dialog-footer" style="padding-top: 0px;margin-top: -16px;"><el-button type="primary" @click="getMulRows()">确 定</el-button><el-button @click="closeClick()">取 消</el-button></div></el-dialog>
</template><script>
import TableList from '@/components/TableList'
import CommonApi from '@api/modules/smartTransactionList'export default {// name: "corpCustTabDialog",components: {TableList},props: {isRowClick: {type: Boolean,default: true},dialogVisible: {type: Boolean,default: false},showObj: {type: Object},position: {type: [String, Number]},isMultiSelect: {type: Boolean,default: false},// 表格配置项options: {type: Object,default: () => {return {multiSelect: false, // boolean 是否多选isindex: false, // boolean 是否展示序列号stripe: true, // boolean 斑马纹border: true, // boolean 纵向边框size: 'medium', // String  medium / small / mini  table尺寸fit: true, // 自动撑开pagination: true // 是否有分页}}},// 分页配置项dialogPageInfo: {type: Object,default: () => {return {page: 1,sizes: [10, 20, 30],size: 10,total: 0}}},// 表格数据dialogTableData: {type: Array,default: () => {return []}}},data() {return {searchLoading: false,corpCustTabDialog: this.dialogVisible,dialogQuery: [{ label: '客户账号: ', value: 'counterpartyAcctNo' },{ label: '客户名称: ', value: 'counterpartyName' }],queryParams: {acctState: '01'},api: CommonApi.selectRosterPageInfo,dialogColumns: [{prop: 'counterpartyAcctNo','label': '客户账号'}, {prop: 'counterpartyName','label': '客户名称'}, {prop: 'counterpartyAcctBankNo','label': '开户行行号'}, {prop: 'counterpartyAcctBankName','label': '开户行行名'}],tableData: this.dialogTableData,multipleSelections: [],selectItem: [],multipleList: []}},mounted() {if (this.dialogQuery && this.dialogQuery.length > 0) {this.dialogQuery.forEach(item => {this.$set(this.queryParams, item.value, '')})}this.dialogDoPage()},methods: {dialogDoPage() {this.searchLoading = trueconst param = { dto: { ...this.queryParams }, size: this.dialogPageInfo.size, page: this.dialogPageInfo.page }this.api(param).then(({ code, data }) => {console.log(0)if (code === 200) {console.log(1)if (Array.isArray(data)) {this.tableData = dataconsole.log(2)} else {this.tableData = data.recordsthis.dialogPageInfo.total = data.totalconsole.log(3)}this.setCheckedRows()}}).finally(() => {this.searchLoading = false})},queryAcct() {this.dialogPageInfo.page = 1this.dialogDoPage()},getRowClick(row) {if (this.isRowClick) {this.closeClick(row)}},// 多选getMulRows() {const list = []this.multipleList.forEach(item => {if (item.rows) {list.push(...item.rows)}})this.closeClick(list)},closeClick(row) {// position: 有多个的弹框需要展示的时候 用position 区分this.$emit('closeHandler', row, this.position)},handleSelectionChange(row) {this.multipleSelections = row},handleRowSelect(row) {let index, objectthis.multipleList.forEach((item, i) => {if (item.page === this.dialogPageInfo.page) {index = iobject = itemreturn}})if (object) {object.rows = [...row]this.multipleList[index].rows = [...new Set(object.rows)]} else {const params = { 'page': this.dialogPageInfo.page, 'rows': [...row] }this.multipleList.push(params)this.multipleList = [...new Set(this.multipleList)]}},setCheckedRows() {this.selectItem = []if (this.tableData.length === 0 || this.multipleList.length === 0) returnconst index = this.multipleList.find(item => {return item.page === this.dialogPageInfo.page})if (!index) returnthis.tableData.forEach(item => {index.rows.forEach(mItem => {if (item.pkId === mItem.pkId) {this.selectItem.push(item)}})})if (this.selectItem.length > 0) {this.$nextTick(() => {this.selectItem.forEach(item => {this.$refs.table.toggleRowSelection(item)})})}}}
}
</script><style scoped></style>

02父组件进行使用子组件

//父组件使用
<el-button slot="append" icon="el-icon-search" @click="endorseeAccClick" /><counterparty-dialog :dialog-visible="couRateVisible" :position="position" @closeHandler="closeHandler" />