!50 feat: ✨ 新增表格操作列自适应组件

Merge pull request !50 from Feng/master

src/components/OperationColumn/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <el-table-column
+    :label="label"
+    :fixed="fixed"
+    :align="align"
+    :show-overflow-tooltip="showOverflowTooltip"
+    :width="finalWidth"
+  >
+    <template #default="{ row }">
+      <div v-auto-width class="operation-buttons">
+        <slot :row="row"></slot>
+      </div>
+    </template>
+  </el-table-column>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  listDataLength: number;
+  prop?: string;
+  label?: string;
+  fixed?: string;
+  align?: string;
+  width?: number;
+  showOverflowTooltip?: boolean;
+  minWidth?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: "操作",
+  fixed: "right",
+  align: "center",
+  minWidth: 80,
+});
+
+const count = ref(0);
+const operationWidth = ref(props.minWidth || 80);
+
+// 计算操作列宽度
+const calculateWidth = () => {
+  count.value++;
+
+  if (count.value !== props.listDataLength) return;
+  const maxWidth = getOperationMaxWidth();
+  operationWidth.value = Math.max(maxWidth, props.minWidth);
+  count.value = 0;
+};
+
+// 计算最终宽度
+const finalWidth = computed(() => {
+  return props.width || operationWidth.value || props.minWidth;
+});
+
+// 自适应宽度指令
+const vAutoWidth = {
+  mounted() {
+    // 初次挂载的时候计算一次
+    calculateWidth();
+  },
+  updated() {
+    // 数据更新时重新计算一次
+    calculateWidth();
+  },
+};
+
+/**
+ * 获取按钮数量和宽带来获取操作组的最大宽度
+ * 注意使用时需要使用 `class="operation-buttons"` 的标签包裹操作按钮
+ * @returns {number} 返回操作组的最大宽度
+ */
+const getOperationMaxWidth = () => {
+  const el = document.getElementsByClassName("operation-buttons");
+
+  // 取操作组的最大宽度
+  let maxWidth = 0;
+  let totalWidth: any = 0;
+  Array.prototype.forEach.call(el, (item) => {
+    // 获取每个item的dom
+    const buttons = item.querySelectorAll(".el-button");
+    // 获取每行按钮的总宽度
+    totalWidth = Array.from(buttons).reduce((acc, button: any) => {
+      return acc + button.scrollWidth + 22; // 每个按钮的宽度加上预留宽度
+    }, 0);
+
+    // 获取最大的宽度
+    if (totalWidth > maxWidth) maxWidth = totalWidth;
+  });
+
+  return maxWidth;
+};
+</script>

src/views/demo/auto-opreation-column.vue

@@ -0,0 +1,100 @@
+<!-- 文件上传组件示例 -->
+<template>
+  <div class="app-container">
+    <el-link
+      href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/auto-opreation-column.vue"
+      type="primary"
+      target="_blank"
+      class="mb-10"
+    >
+      示例源码 请点击>>>>
+    </el-link>
+
+    <div>
+      <h3>自适应表格操作列</h3>
+      <div class="text-14px color-#999">
+        该组件适用于含有操作列的表格。在某些情况下，按钮可能需要根据数据状态或其他条件动态展示，无法预设固定宽度。操作列组件能根据按钮数量自适应宽度，不需要再手动设置宽度。
+      </div>
+      <div class="mt-30px">
+        <el-checkbox v-model="checked1" label="查看" size="large" />
+        <el-checkbox v-model="checked2" label="超过了六个字会怎么样" size="large" />
+        <el-checkbox v-model="checked3" label="新增" size="large" />
+        <el-checkbox v-model="checked4" label="返回很多个字" size="large" />
+        <el-checkbox v-model="checked5" label="编辑" size="large" />
+      </div>
+
+      <el-table :data="tableData" style="width: 100%" border>
+        <el-table-column prop="date" label="Date" />
+        <el-table-column prop="name" label="Name" />
+        <el-table-column prop="state" label="State" />
+        <el-table-column prop="city" label="City" />
+        <el-table-column prop="address" label="Address" />
+        <el-table-column prop="zip" label="Zip" />
+        <OperationColumn :list-data-length="tableData.length">
+          <template #default="{ row }">
+            <el-button v-if="checked1" link type="primary" size="small">查看</el-button>
+            <el-button v-if="checked2" link type="primary" size="small">
+              超过了六个字会怎么样
+            </el-button>
+            <el-button v-if="checked3" link type="primary" size="small">新增</el-button>
+            <el-button v-if="checked4" link type="primary" size="small">返回很多个字</el-button>
+            <el-button v-if="checked5" link type="primary" size="small">编辑</el-button>
+            <el-button v-if="row.tag === 'Home'" link type="primary" size="small">默认</el-button>
+          </template>
+        </OperationColumn>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import OperationColumn from "@/components/OperationColumn/index.vue";
+
+const checked1 = ref(true);
+const checked2 = ref(false);
+const checked3 = ref(false);
+const checked4 = ref(false);
+const checked5 = ref(false);
+
+const tableData = ref<any>([]);
+setTimeout(() => {
+  tableData.value = [
+    {
+      date: "2016-05-03",
+      name: "Tom",
+      state: "California",
+      city: "Los Angeles",
+      address: "No. 189, Grove St, Los Angeles",
+      zip: "CA 90036",
+      tag: "Home",
+    },
+    {
+      date: "2016-05-02",
+      name: "Tom",
+      state: "California",
+      city: "Los Angeles",
+      address: "No. 189, Grove St, Los Angeles",
+      zip: "CA 90036",
+      tag: "Office",
+    },
+    {
+      date: "2016-05-04",
+      name: "Tom",
+      state: "California",
+      city: "Los Angeles",
+      address: "No. 189, Grove St, Los Angeles",
+      zip: "CA 90036",
+      tag: "Home",
+    },
+    {
+      date: "2016-05-01",
+      name: "Tom",
+      state: "California",
+      city: "Los Angeles",
+      address: "No. 189, Grove St, Los Angeles",
+      zip: "CA 90036",
+      tag: "Office",
+    },
+  ];
+}, 300);
+</script>