vue-admin-core/es/components/table-select/src/index.mjs

A Component Library for Vue 3

import { defineComponent, ref, computed, toRef, h, reactive, onMounted, withDirectives } from 'vue';
import { ElSelect, ElTable, ElPagination, ElTableColumn, ElOption, ElLoading } from 'element-plus';
import { pick } from 'lodash-es';
import { useSelect } from './select.mjs';
import { useTable } from './table.mjs';
import CacheOptions from './cache-options.mjs';
import { usePagination } from './pagination.mjs';

var TableSelect = defineComponent({
  name: "VacTableSelect",
  props: {
    ...ElSelect.props,
    ...ElTable.props,
    ...ElPagination.props,
    /**
     * 表格最大高度
     */
    maxHeight: {
      type: [String, Number],
      default: () => 240
    },
    /**
     * 表格列
     */
    columns: {
      type: Array,
      default: () => []
    },
    props: {
      type: Object,
      default: () => ({
        children: "children",
        label: "label",
        value: "value",
        disabled: "disabled"
      })
    }
  },
  setup(props, context) {
    const {
      expose
    } = context;
    const select = ref();
    const table = ref();
    const pagination = ref();
    const key = computed(() => props.props.value || props.valueKey || props.nodeKey || "value");
    const currentPage = toRef(props.currentPage || 1);
    const {
      cacheOptions,
      setOptionProxy,
      filter,
      tableProps
    } = useTable(props, context, {
      select,
      table,
      key,
      currentPage
    });
    const selectProps = useSelect(props, context, {
      select,
      table,
      pagination,
      key,
      filter,
      currentPage
    });
    const paginationProps = usePagination(props, context, {
      select,
      table,
      key,
      filter,
      currentPage
    });
    const Columns = [props.columns.map(({
      slots,
      ...reset
    }, index) => h(ElTableColumn, reactive({
      key: `${reset.prop}-${index}`,
      ...reset
    }), slots))];
    if (props.multiple) {
      Columns.unshift(h(ElTableColumn, {
        width: 30,
        key: "selection",
        type: "selection"
      }));
    }
    const methods = reactive({});
    expose(methods);
    onMounted(() => {
      Object.assign(methods, {
        ...pick(table.value, ["clearSelection", "getSelectionRows", "toggleRowSelection", "toggleAllSelection", "toggleRowExpansion", "setCurrentRow", "clearSort", "clearFilter", "doLayout", "sort", "scrollTo", "setScrollTop", "setScrollLeft"]),
        ...pick(select.value, ["focus", "blur"])
      });
    });
    return () => {
      return h(ElSelect, reactive({
        ...selectProps,
        modelValue: props.modelValue,
        ref: (ref2) => select.value = ref2
      }), {
        ...context.slots,
        default: () => [h(CacheOptions, {
          data: cacheOptions.value
        }), cacheOptions.value.map(({
          value,
          currentLabel,
          isDisabled
        }) => {
          return h(ElOption, {
            label: currentLabel,
            value,
            disabled: isDisabled,
            style: {
              display: "none"
            },
            ref: (vm) => setOptionProxy(value, vm)
          });
        }), withDirectives(h(ElTable, reactive({
          ...tableProps,
          ref: (ref2) => table.value = ref2
        }), {
          default: () => Columns
        }), [[ElLoading.directive, props.loading]]), h(ElPagination, reactive({
          ...paginationProps,
          ref: (ref2) => pagination.value = ref2
        }), {})]
      });
    };
  }
});

export { TableSelect as default };
//# sourceMappingURL=index.mjs.map