birdpaper-ui/lib/table/src/table.vue2.js

一个通用的 vue3 UI组件库。A common vue3 UI component library.

"use strict";
const vue = require("vue");
const table = require("./table.js");
const tableHeader_vue_vue_type_script_setup_true_name_TableHeader_lang = require("./components/table-header.vue.js");
const tableBody = require("./components/table-body.js");
const empty_vue_vue_type_script_setup_true_name_TableEmpty_lang = require("./components/empty.vue.js");
const tableSelect = require("./components/table-select.vue.js");
const index = require("../../spin/index.js");
const tableSelect$1 = require("./table-select.js");
const _sfc_main = vue.defineComponent({
  name: "Table",
  components: { TableHeader: tableHeader_vue_vue_type_script_setup_true_name_TableHeader_lang, TableEmpty: empty_vue_vue_type_script_setup_true_name_TableEmpty_lang, TableBody: tableBody, TableSelect: tableSelect, bpSpin: index },
  props: {
    /* 表格头部列表 Table header list */
    cols: { type: Array, default: () => [] },
    /* 表格数据 Table data source */
    data: { type: Array, default: () => [] },
    /* 固定高度 Fixed height */
    height: { type: String, default: "" },
    /* 加载状态 loading or not */
    loading: { type: Boolean, default: false },
    /* 展示边框 Bordered or not */
    border: { type: Boolean, default: false },
    /* 斑马纹 Stripe or not */
    stripe: { type: Boolean, default: false },
    /** 行 Key 字段名称 */
    rowKey: { type: String },
    /** 选择器配置 */
    selection: { type: Object },
    /** 选择数据的Key */
    selectedKey: { type: Array, default: () => [] }
  },
  emits: ["update:selectedKey", "selection-change", "select-all", "select"],
  setup(props, { slots, emit }) {
    const tableHeaderRef = vue.ref();
    let { bpTable, columns, table_width } = table.useTable(props, slots);
    let { selectedData, onSelectChange, onSelectAll } = tableSelect$1.useTableSelect(props, emit, tableHeaderRef);
    const isEmpty = vue.computed(() => props.data.length === 0);
    const hasBorder = vue.computed(() => props.border);
    const isStripe = vue.computed(() => props.stripe);
    const fixedHeight = vue.computed(() => props.height);
    vue.watch(
      () => props.selectedKey,
      () => {
        selectedData.value = props.selectedKey;
      },
      { immediate: true }
    );
    const bodyAreaStyle = vue.computed(() => {
      if (props.height) {
        return `width:${table_width.value}px;max-height:${props.height}px;height:${props.height}px;overflow-y:auto`;
      }
      return `width:${table_width.value}px`;
    });
    const innerClass = vue.computed(() => {
      let name = [
        "bp-table-inner",
        { "bp-table-border": hasBorder.value },
        { "bp-table-stripe": isStripe.value },
        { "bp-table-fixed-header": fixedHeight.value }
      ];
      return name;
    });
    const tdClass = (v) => {
      let align = `text-${v["align"] || "left"}`;
      let name = ["bp-table-td", align];
      return name;
    };
    return {
      slots,
      bpTable,
      tableHeaderRef,
      columns,
      table_width,
      isEmpty,
      selectedData,
      bodyAreaStyle,
      innerClass,
      tdClass,
      onSelectChange,
      onSelectAll
    };
  }
});
module.exports = _sfc_main;