封装一个带el-form的，带el-table的，带分页的，带搜索查询的dialog组件，很使用的二次封装组件。

#封装dialog小案例

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

##对组件进行二次封装

<template>
  <el-dialog
    title="客户账号查询"
    :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-form
        v-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>

      <tableList
        ref="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 = true
      const 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 = data
            console.log(2)
          } else {
            this.tableData = data.records
            this.dialogPageInfo.total = data.total
            console.log(3)
          }
          this.setCheckedRows()
        }
      }).finally(() => {
        this.searchLoading = false
      })
    },
    queryAcct() {
      this.dialogPageInfo.page = 1
      this.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, object
      this.multipleList.forEach((item, i) => {
        if (item.page === this.dialogPageInfo.page) {
          index = i
          object = item
          return
        }
      })
      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) return
      const index = this.multipleList.find(item => {
        return item.page === this.dialogPageInfo.page
      })
      if (!index) return
      this.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" />