feat:action/tree组件

main/src/components/custom-table-operate/index.vue

@@ -5,8 +5,8 @@
       <el-dropdown-menu v-if="!isEmpty(actions)">
         <template v-for="item in actions" :key="item.name">
           <el-dropdown-item v-if="onPermission(item)" @click="item.event(data)">
-            <el-button :type="item.type ?? 'primary'" :icon="item.icon" :size="item.size" :disabled="item.disabled" text>
-              {{ item.name }}
+            <el-button :type="item.type ?? 'primary'" :icon="formatterIcon(item)" :size="item.size" :disabled="item.disabled" text>
+              {{ item.name || item.formatter(data) }}
             </el-button>
           </el-dropdown-item>
         </template>
@@ -26,6 +26,10 @@ const onPermission = (row) => {
   if (row.auth === undefined) return true;
   return typeof row.auth === 'function' ? row.auth(props.data) : row.auth;
 };
+
+const formatterIcon = (row) => {
+  return typeof row.icon === 'function' ? row.icon(props.data) : row.icon;
+};
 </script>
 <style lang="scss" scoped>
 .custom-table-operate {

main/src/components/custom-table-tree/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <div :class="`custom-table-tree ${shadow ? 'custom-table-tree__shadow' : ''}`">
+    <div v-if="title" class="title">{{ title }}</div>
+    <el-tree
+      node-key="id"
+      :data="data"
+      :show-checkbox="option.showCheckbox"
+      :default-expanded-keys="option.defaultExpandedKeys"
+      :default-checked-keys="option.defaultCheckedKeys"
+      :props="option.defaultProps"
+      @node-click="handleNodeClick"
+    />
+  </div>
+</template>
+<script setup name="custom-table-tree">
+const props = defineProps({
+  title: { type: String, default: '' },
+  shadow: { type: Boolean, default: true },
+  data: { type: Array, default: () => [] },
+  option: {
+    type: Object,
+    default: () => {
+      return {
+        showCheckbox: false,
+        defaultProps: {
+          children: 'children',
+          label: 'label',
+        },
+        defaultExpandedKeys: [],
+        defaultCheckedKeys: [],
+      };
+    },
+  },
+});
+const emit = defineEmits(['node-click']);
+
+const handleNodeClick = (data) => {
+  emit('node-click', data);
+};
+</script>
+<style lang="scss" scoped>
+.custom-table-tree {
+  width: 100%;
+  height: 100%;
+  min-width: 200px;
+  @include flex-column();
+
+  &__shadow {
+    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.1);
+  }
+
+  .title {
+    height: 36px;
+    padding: 0 20px;
+    line-height: 36px;
+    border-radius: 4px;
+    font-size: 16px;
+    color: #fff;
+    background: var(--el-color-primary);
+  }
+
+  .el-tree {
+    padding: 16px 10px 10px;
+    box-sizing: border-box;
+  }
+}
+</style>

main/src/components/index.js

@@ -1,5 +1,6 @@
 import SvgIcon from './svg-icon';
 import CustomTableOperate from './custom-table-operate';
+import CustomTableTree from './custom-table-tree';
 import CustomImportExcel from './custom-import-excel';
 import CustomRichEditor from './custom-rich-editor';
 import CustomEchartBar from './custom-echart-bar';
@@ -7,4 +8,14 @@ import CustomEchartPie from './custom-echart-pie';
 import CustomEchartLine from './custom-echart-line';
 import CustomEchartMixin from './custom-echart-mixin';
 
-export { SvgIcon, CustomTableOperate, CustomImportExcel, CustomRichEditor, CustomEchartBar, CustomEchartPie, CustomEchartLine, CustomEchartMixin };
+export {
+  SvgIcon,
+  CustomTableOperate,
+  CustomTableTree,
+  CustomImportExcel,
+  CustomRichEditor,
+  CustomEchartBar,
+  CustomEchartPie,
+  CustomEchartLine,
+  CustomEchartMixin,
+};