GridEtyPromptDialog.vue

<template>
  <el-dialog
    :title="promptData.title"
    :visible.sync="show"
    custom-class="grid-ety"
    :highlight-current-row="true"
    width="60%"
    :before-close="beforeClose"
  >
    <el-table
      :data="tableData"
      border
      @row-dblclick="selectEty"
    >
      <el-table-column
        v-for="(item, idx) in tableColumn"
        :key="idx"
        :property="item.prop"
        :label="item.label"
        :width="item.width"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next, total, jumper"
      :total="this.promptData.data.length"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="currentChange"
    >
    </el-pagination>
  </el-dialog>
</template>

<script>
export default {
  props: {
    promptData: {
      required: true,
      type: Object,
      default: () => {
        return {
          title: "",
          columns: "",
          data: [],
          rulePath: "",
          modelUrl: "", //非机构处理需要回填的字段路劲信息,isPty为false时必输
          defaultColumn: "",
        };
      },
    },
    isPty: {
      //默认为机构处理
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      show: false,
      currentPage: 1,
      pageSizes: [5, 10, 20, 30, 40, 50, 100],
      pageSize: 5,
    };
  },
  computed: {
    tableColumn() {
      return this.promptData.columns
    },
    tableData() {
      return this.promptData.data.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    },
  },
  methods: {
    currentChange(currentPage) {
      this.currentPage = currentPage;
    },
    selectEty(row) {
      this.$emit("select-ety", {
        ...row,
        role: this.promptData.type
      });
      this.show = false;
      this.currentPage = 1;
    },
    beforeClose(done) {
      this.show = false;
      this.currentPage = 1;
      done();
    },
  },
};
</script>

<style>
.grid-ety .el-table .cell {
  white-space: pre-wrap;
}
</style>