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

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

import { defineComponent, ref, computed, watch } from "vue";
import { useTable } from "./table.js";
import _sfc_main$1 from "./components/table-header.vue.js";
import TableBody from "./components/table-body.js";
import _sfc_main$2 from "./components/empty.vue.js";
import TableSelect from "./components/table-select.vue.js";
import Spin from "../../spin/index.js";
import { useTableSelect } from "./table-select.js";
const _sfc_main = defineComponent({
  name: "Table",
  components: { TableHeader: _sfc_main$1, TableEmpty: _sfc_main$2, TableBody, TableSelect, bpSpin: Spin },
  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 = ref();
    let { bpTable, columns, table_width } = useTable(props, slots);
    let { selectedData, onSelectChange, onSelectAll } = useTableSelect(props, emit, tableHeaderRef);
    const isEmpty = computed(() => props.data.length === 0);
    const hasBorder = computed(() => props.border);
    const isStripe = computed(() => props.stripe);
    const fixedHeight = computed(() => props.height);
    watch(
      () => props.selectedKey,
      () => {
        selectedData.value = props.selectedKey;
      },
      { immediate: true }
    );
    const bodyAreaStyle = 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 = 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
    };
  }
});
export {
  _sfc_main as default
};