修改公共组件

2026-09-09 10:33:09 +08:00
parent f2f17f41f6
commit fddd8f0586
11 changed files with 658 additions and 451 deletions
@@ -0,0 +1,121 @@
+<template>
+  <el-table
+    ref="tableRef"
+    class="simple-table"
+    v-loading="loading"
+    :data="data"
+    :row-key="rowKey"
+    :border="border"
+    :stripe="stripe"
+    :size="size"
+    :height="height"
+    :max-height="maxHeight"
+    :span-method="spanMethod"
+    :empty-text="emptyText"
+    :highlight-current-row="highlightCurrentRow"
+    @selection-change="(val) => $emit('selection-change', val)"
+    @row-click="(row, col, e) => $emit('row-click', row, col, e)"
+  >
+    <el-table-column v-if="selection" type="selection" width="55" align="center" />
+    <el-table-column v-if="showIndex" type="index" :label="indexLabel" width="55" align="center" />
+
+    <el-table-column
+      v-for="col in columns"
+      :key="col.key || col.prop || col.label"
+      :prop="col.prop"
+      :label="col.label"
+      :width="col.width"
+      :min-width="col.minWidth"
+      :align="col.align"
+      :fixed="col.fixed"
+      :sortable="col.sortable"
+      :show-overflow-tooltip="col.showOverflowTooltip"
+    >
+      <template #header="scope">
+        <slot :name="`header-${col.prop}`" v-bind="scope">{{ col.label }}</slot>
+      </template>
+      <template #default="scope">
+        <slot :name="`col-${col.slot || col.prop}`" v-bind="scope" :row="scope.row">
+          <dict-tag
+            v-if="col.dict"
+            :options="getDictOptions(col.dict)"
+            :value="scope.row[col.prop]"
+          />
+          <span v-else-if="col.formatter" :class="col.className">{{ col.formatter(scope.row, col, scope.row[col.prop], scope.$index) }}</span>
+          <span v-else :class="col.className">{{ scope.row[col.prop] }}</span>
+        </slot>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup>
+/**
+ * SimpleTable ¡ª local-data table (no search / toolbar / pagination).
+ * Column config aligns with BasicTable: prop, label, width, minWidth, align, fixed,
+ * sortable, showOverflowTooltip, dict, formatter, slot, className.
+ *
+ * <simple-table :data="list" :columns="columns" :loading="loading" border>
+ *   <template #col-action="{ row }">...</template>
+ * </simple-table>
+ */
+defineOptions({ name: 'SimpleTable' })
+
+const props = defineProps({
+  data: { type: Array, default: () => [] },
+  columns: { type: Array, default: () => [] },
+  loading: { type: Boolean, default: false },
+  rowKey: { type: [String, Function], default: undefined },
+  border: { type: Boolean, default: false },
+  stripe: { type: Boolean, default: false },
+  size: { type: String, default: undefined },
+  height: { type: [String, Number], default: undefined },
+  maxHeight: { type: [String, Number], default: undefined },
+  spanMethod: { type: Function, default: null },
+  emptyText: { type: String, default: undefined },
+  selection: { type: Boolean, default: false },
+  showIndex: { type: Boolean, default: false },
+  indexLabel: { type: String, default: '#' },
+  highlightCurrentRow: { type: Boolean, default: false }
+})
+
+defineEmits(['selection-change', 'row-click'])
+
+const { proxy } = getCurrentInstance()
+const tableRef = ref()
+const dictMap = reactive({})
+
+const dictTypes = computed(() => {
+  const set = new Set()
+  props.columns.forEach((c) => c.dict && set.add(c.dict))
+  return [...set]
+})
+
+watch(
+  dictTypes,
+  (types) => {
+    if (!types.length) return
+    const dictRefs = proxy.useDict(...types)
+    types.forEach((t) => {
+      const d = dictRefs[t]
+      dictMap[t] = isRef(d) ? d : ref(d)
+    })
+  },
+  { immediate: true }
+)
+
+function getDictOptions(type) {
+  const d = dictMap[type]
+  return isRef(d) ? d.value : d || []
+}
+
+defineExpose({
+  getTableRef: () => tableRef.value
+})
+</script>
+
+<style scoped>
+.simple-table {
+  width: 100%;
+}
+</style>