表格自定义

src/components/common-table/common-table-column.vue

@@ -7,6 +7,9 @@
  * @property {string} property 数据属性
  * @property {string} width 宽度
  * @property {boolean} isOperation 是否是操作列
+ * @property {string} slot 自定义插槽
+ * @property [ButtonProps] buttons 自定义按钮
+ * @property {Object} attrs 其他属性
  */
 /**
  * 配置信息
@@ -18,16 +21,61 @@ const props = defineProps({
   column: {
     type: Object,
     required: true
+  },
+  buttonSize: {
+    type: String,
+    default: 'small'
   }
 })
+
 </script>
 
 <template>
   <el-table-column
-    :label="column.label"
+    v-if="!column.isOperation"
+    :label="column.label || $t(column.labelKey)"
     :property="column.property"
     :width="column.width"
-  />
+    v-bind="column.attrs"
+  >
+    <template
+      v-if="column.slot"
+      #default="scope"
+    >
+      <slot
+        v-bind="scope"
+        name="default"
+      />
+    </template>
+  </el-table-column>
+  <el-table-column
+    v-if="column.isOperation"
+    :label="column.label || $t(column.labelKey)"
+    :width="column.width"
+    v-bind="column.attrs"
+  >
+    <template
+      #default="scope"
+    >
+      <el-button
+        v-for="(button, index) in column.buttons"
+        :key="index"
+        :type="button.type"
+        :icon="button.icon"
+        :size="button.size||buttonSize"
+        :disabled="button.disabled"
+        :round="button.round"
+        :circle="button.circle"
+        @click="button.click&&button.click(scope.row, scope)"
+      >
+        {{ button.label || $t(button.labelKey) }}
+      </el-button>
+      <slot
+        name="default"
+        v-bind="scope"
+      />
+    </template>
+  </el-table-column>
 </template>
 
 <style scoped>

src/components/common-table/index.vue

@@ -1,5 +1,6 @@
 <script setup>
 import CommonTableColumn from '@/components/common-table/common-table-column.vue'
+import { computed } from 'vue'
 
 /**
  * @typedef {TableProps} CommonTableProps
@@ -32,8 +33,54 @@ const props = defineProps({
   stripe: {
     type: Boolean,
     default: true
+  },
+  border: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * el-button
+   * @type [ButtonProps]
+   */
+  buttons: {
+    type: Array,
+    default () {
+      return []
+    }
+  },
+  buttonsSlot: {
+    type: String,
+    default: ''
+  },
+  buttonSize: {
+    type: String,
+    default: 'small'
+  },
+  pageInfo: {
+    type: Object,
+    default: null
+  },
+  pageAttrs: {
+    type: Object,
+    default () {
+      return {}
+    }
   }
 })
+
+const calcColumns = computed(() => {
+  let _columns = props.columns
+  if (props.buttons.length || props.buttonsSlot) {
+    const buttonColumn = {
+      labelKey: 'common.label.operation',
+      isOperation: true,
+      slot: props.buttonsSlot,
+      buttons: props.buttons
+    }
+    _columns = [..._columns, buttonColumn]
+  }
+  return _columns
+})
 </script>
 
 <template>
@@ -42,12 +89,26 @@ const props = defineProps({
     :highlight-current-row="highlightCurrentRow"
     :stripe="stripe"
     :data="data"
+    :border="border"
   >
     <common-table-column
-      v-for="(column, index) in columns"
+      v-for="(column, index) in calcColumns"
       :key="index"
       :column="column"
-    />
+      :button-size="buttonSize"
+    >
+      <!--用于自定义显示属性-->
+      <template
+        #default="scope"
+      >
+        <slot
+          :scope="scope"
+          :item="scope.row"
+          :name="column.slot"
+        />
+      </template>
+    </common-table-column>
+    <el-pagination v-if="pageInfo" />
   </el-table>
 </template>