init

src/views/lowdesign/tableDesign/components/InfoVxeTable.vue

@@ -0,0 +1,88 @@
+<template>
+  <vxe-table
+    ref="vxeTableRef"
+    :class="tabItem.key + '-vxe-table'"
+    :border="true"
+    size="small"
+    show-overflow="tooltip"
+    height="356"
+    :row-config="{ isHover: true }"
+    :edit-config="{ trigger: 'dblclick', mode: 'row', showIcon: false }"
+    :data="tableData"
+    :scroll-y="{ enabled: true }"
+    :checkbox-config="checkboxConfig || {}"
+    :row-class-name="rowClassName"
+    @checkbox-all="(obj) => emit('selection-change', obj)"
+    @checkbox-change="(obj) => emit('selection-change', obj)"
+    @cell-click="(obj) => emit('cell-click', obj)"
+  >
+    <vxe-column v-if="tabItem.edit" type="checkbox" width="50" align="center"></vxe-column>
+    <vxe-column type="seq" width="50" align="center"></vxe-column>
+    <vxe-column v-if="tabItem.edit" key="customDrag" field="customDrag" width="50" align="center">
+      <template #default="{ rowIndex }">
+        <el-dropdown
+          trigger="hover"
+          placement="bottom"
+          @command="(obj) => emit('dropdown-command', obj)"
+        >
+          <div>
+            <Icon :size="20" icon="gg:menu-grid-r" />
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item :command="{ index: rowIndex, type: 'up' }" :disabled="rowIndex == 0"
+                >向上移</el-dropdown-item
+              >
+              <el-dropdown-item
+                :command="{ index: rowIndex, type: 'down' }"
+                :disabled="rowIndex == tableData.length - 1"
+                >向下移</el-dropdown-item
+              >
+              <el-dropdown-item :command="{ index: rowIndex, type: 'add' }"
+                >插入一行</el-dropdown-item
+              >
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </template>
+    </vxe-column>
+    <vxe-column v-for="(item, key) in column" :key="key" :field="key" v-bind="item"></vxe-column>
+  </vxe-table>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'InfoVxeTable' })
+
+interface Props {
+  tabItem: any
+  column: object
+  rowClassName?: string | Function
+  checkboxConfig?: object
+}
+const props = defineProps<Props>()
+const tableData = defineModel<Array<any>>({ default: [] })
+const emit = defineEmits(['selection-change', 'cell-click', 'dropdown-command'])
+
+const vxeTableRef = ref()
+
+defineExpose({ vxeTableRef })
+</script>
+
+<style lang="scss" scoped>
+.view-vxe-table,
+.exp-vxe-table {
+  ::v-deep(.vxe-table--header) {
+    .vxe-header--column {
+      position: relative;
+
+      .vxe-cell {
+        .vxe-cell-title-suffix-icon {
+          position: absolute;
+          top: 5px;
+          right: -2px;
+        }
+      }
+    }
+  }
+}
+</style>