表格自定义

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,17 +21,62 @@ 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,7 +33,53 @@ 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>
 
@@ -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>
 

src/messages/common_cn.js

@@ -23,6 +23,13 @@ common.label.about = '关于'
 common.label.logout = '退出'
 common.label.submit = '提交'
 common.label.reset = '重置'
+common.label.operation = '操作'
+common.label.new = '新增'
+common.label.edit = '编辑'
+common.label.modify = '修改'
+common.label.delete = '删除'
+common.label.search = '搜索'
+common.label.find = '查找'
 
 //* =======================msg=====================//
 common.msg.nonNull = '{0}不能为空'

src/messages/common_en.js

@@ -23,6 +23,13 @@ common.label.about = 'About'
 common.label.logout = 'Logout'
 common.label.submit = 'Submit'
 common.label.reset = 'Reset'
+common.label.operation = 'Operations'
+common.label.new = 'New'
+common.label.edit = 'Edit'
+common.label.modify = 'Modify'
+common.label.delete = 'Delete'
+common.label.search = 'Search'
+common.label.find = 'Find'
 
 //* =======================msg=====================//
 common.msg.nonNull = '{0} is required.'

src/views/tools/Tables.vue

@@ -1,4 +1,6 @@
 <script setup>
+import { ref } from 'vue'
+
 const tableData = [
   {
     birthday: '2016-05-03',
@@ -34,7 +36,8 @@ const columns = [{
   property: 'userName'
 }, {
   label: '性别',
-  property: 'gender'
+  property: 'gender',
+  slot: 'gender'
 }, {
   label: '出生日期',
   property: 'birthday'
@@ -42,13 +45,43 @@ const columns = [{
   label: '地址',
   property: 'address'
 }]
+const buttons = ref([{
+  labelKey: 'common.label.edit',
+  type: 'primary',
+  click: item => {
+    console.info('编辑=============', item)
+  }
+}, {
+  labelKey: 'common.label.delete',
+  type: 'danger',
+  click: item => {
+    console.info('删除=============', item)
+  }
+}, {
+  label: '其他操作'
+}])
 </script>
 
 <template>
   <common-table
     :data="tableData"
     :columns="columns"
-  />
+    :buttons="buttons"
+    buttons-slot="buttons"
+  >
+    <template #gender="{item}">
+      <el-tag
+        :type="item.gender === 'male' ? '' : 'success'"
+      >
+        {{ item.gender }}
+      </el-tag>
+    </template>
+    <template #buttons="{item}">
+      <el-button @click="console.info(item)">
+        测试
+      </el-button>
+    </template>
+  </common-table>
 </template>
 
 <style scoped>