表单按钮自定义，简单表格

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

@@ -0,0 +1,35 @@
+<script setup>
+/**
+ * 表格列配置信息，对应el-table-column数据
+ * @typedef {Object} CommonTableColumn
+ * @property {string} label 标签头
+ * @property {string} labelKey 国际化
+ * @property {string} property 数据属性
+ * @property {string} width 宽度
+ * @property {boolean} isOperation 是否是操作列
+ */
+/**
+ * 配置信息
+ */
+const props = defineProps({
+  /**
+   * @type {CommonTableColumn}
+   */
+  column: {
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <el-table-column
+    :label="column.label"
+    :property="column.property"
+    :width="column.width"
+  />
+</template>
+
+<style scoped>
+
+</style>

src/components/common-table/index.vue

@@ -0,0 +1,56 @@
+<script setup>
+/**
+ * @typedef {TableProps} CommonTableProps
+ * @property {[CommonTableColumn]} columns
+ */
+import CommonTableColumn from '@/components/common-table/common-table-column.vue'
+
+/**
+ * @type CommonTableProps
+ */
+const props = defineProps({
+  /**
+   * @type {[CommonTableColumn]}
+   */
+  columns: {
+    type: Array,
+    required: true
+  },
+  /**
+   * 显示数据
+   */
+  data: {
+    type: Array,
+    default () {
+      return []
+    }
+  },
+  highlightCurrentRow: {
+    type: Boolean,
+    default: true
+  },
+  stripe: {
+    type: Boolean,
+    default: true
+  }
+})
+</script>
+
+<template>
+  <el-table
+    :v-bind="$attrs"
+    :highlight-current-row="highlightCurrentRow"
+    :stripe="stripe"
+    :data="data"
+  >
+    <common-table-column
+      v-for="(column, index) in columns"
+      :key="index"
+      :column="column"
+    />
+  </el-table>
+</template>
+
+<style scoped>
+
+</style>