vxe 弹窗选中组件开发

效果图

 使用

import userpanel from "@/components/GridPanel/userpanel";


<userpanel ref="userpanel" :multiple="true"  @confirm="newConfirm"/>


newConfirm(data){
      alert(JSON.stringify(data));
},

组件代码

<template>
  <div>
    <vxe-modal
      v-model="dlgShow"
      :position="{ top: 30 }"
      width="700"
      min-width="550"
      min-height="300"
      height="550"
      resize
      size="small"
      show-zoom
      destroy-on-close
    >
      <template #title>
        <div class="vxe-modal-header-set">
          <div class="header-btn-list">
            <h3 class="header-title">人员选项</h3>
            <div class="btn-wrap-set">
              <vxe-button
                class="btn"
                status="primary"
                content="保存"
                @click="confirm"
              ></vxe-button>
              <vxe-button
                class="btn"
                status="info"
                @click="close()"
                content="取消"
              ></vxe-button>
            </div>
          </div>
        </div>
      </template>
      <vxe-form :data="queryData" size="small">
        <vxe-form-item title="名称" field="name" :item-render="{}">
          <template #default="{ data }">
            <vxe-input
              v-model="data.name"
              placeholder="请输入名称"
              clearable
            ></vxe-input>
          </template>
        </vxe-form-item>
        <vxe-form-item>
          <template #default>
            <vxe-button
              type="button"
              size="small"
              @click="getList"
              status="primary"
              >查询</vxe-button
            >
            <vxe-button type="button" size="small" @click="reset"
              >重置</vxe-button
            >
          </template>
        </vxe-form-item>
      </vxe-form>
      <vxe-grid
        border
        resizable
        ref="table"
        :loading="loading"
        :seq-config="{
          startIndex: (tablePage.currentPage - 1) * tablePage.pageSize,
        }"
        :columns="tableColumn"
        :data="tableData"
        height="455"
        :radio-config="{ trigger: 'row' }"
        :checkbox-config="{ trigger: 'row' }"
      >
        <template #pager>
          <vxe-pager
            :layouts="[
              'Sizes',
              'PrevJump',
              'PrevPage',
              'Number',
              'NextPage',
              'NextJump',
              'FullJump',
              'Total',
            ]"
            :current-page.sync="tablePage.currentPage"
            :page-size.sync="tablePage.pageSize"
            :total="tablePage.total"
            @page-change="handlePageChange"
          >
          </vxe-pager>
        </template>
      </vxe-grid>
    </vxe-modal>
  </div>
</template>
<script>
import { getListBy } from "@/api/erp/userbaseinfo/baseinfo";

export default {
  name: "userpanel",
  props: {
    multiple: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
  },
  data() {
    return {
      queryData: { name: "" },
      dlgShow: false,
      loading: false,
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      tableColumn: [
        { type: "seq", width: 40 },
        { type: this.multiple ? "checkbox" : "radio", width: 40 },
        { field: "userid", title: "用户编号", width: 80 },
        { field: "name", title: "用户名称", width: 80 },
        { field: "sex", title: "性别", align: "center", width: 60 },
        { field: "numid", title: "身份证" },
        { field: "mobilephone", title: "手机号码", width: 130 },
        {
          field: "ygzt",
          title: "状态",
          width: 60,
          slots: {
            // 使用 JSX 渲染
            default: ({ row }) => {
              return [
                <span >
                  {row.ygzt=="1"?"有效":(row.ygzt=="0"?"无效":"")} 
                </span>,
              ];
            },
          },
        },
      ],
      tableData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    reset() {
      this.queryData.name = "";
      this.getList();
    },
    openDlg() {
      this.dlgShow = true;
    },
    close() {
      this.dlgShow = false;
    },
    confirm() {
      this.dlgShow = false;
      if(this.multiple==false){
        this.$emit("confirm", this.$refs.table.getRadioRecord(false));
      }else{
        this.$emit("confirm", this.$refs.table.getCheckboxRecords(false));
      }
    },
    getList() {
      this.loading = true;
      getListBy({
        pageNum: this.tablePage.currentPage,
        pageSize: this.tablePage.pageSize,
        areaid: "01",
        name: this.queryData.name,
      }).then((response) => {
        this.tableData = response.rows;
        this.tablePage.total = response.total;
        this.loading = false;
      });
    },
    searchEvent() {
      this.tablePage.currentPage = 1;
      this.getList();
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage;
      this.tablePage.pageSize = pageSize;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/global.scss";
::v-deep .vxe-modal--wrapper .vxe-modal--content {
  padding: 2px 2px 0px 2px;
}
</style>