feat: table 添加action disable 功能

packages/fes-ui/examples/views/component/table.vue

@@ -16,6 +16,7 @@
                         <Column prop="age" name="年龄" sort />
                         <Column prop="adr" name="地址" />
                         <Column prop="status" name="等级" />
+                        <Column name="操作" :action="action" />
                     </Wb-table>
                     <Wb-button class="mt20" @click="getSelectedTr">获取选择的行</Wb-button>
                 </div>
@@ -255,12 +256,24 @@ export default {
                 func: function () {
                     console.log(this)
                     console.log(arguments)
+                },
+                disabled(trData) {
+                    if (trData.name === '张晓刚') {
+                        return true;
+                    }
+                    return false;
                 }
             }, {
                 text: '删除',
                 func: function () {
                     console.log(this)
                     console.log(arguments)
+                },
+                disabled(trData) {
+                    if (trData.name !== '张晓刚') {
+                        return true;
+                    }
+                    return false;
                 }
             }],
             component: function (trData, tdData) {
@@ -337,6 +350,12 @@ export default {
 
     },
     methods: {
+        disabledCell(trData) {
+            if (trData.name === '张晓刚') {
+                return true;
+            }
+            return false;
+        },
         formatDate: function (data) {
             var year = data.getFullYear();
             var m = data.getMonth();

packages/fes-ui/src/components/data-table/tableAction.vue

@@ -1,19 +1,19 @@
 <template>
     <div class="ui-table-action">
         <Wb-button
-            v-for="(item, index) in col.action"
+            v-for="(item, index) in actions"
             :key="index"
-            @click.stop="fireAction(item, $event)"
+            :disabled="item._disabled"
-            class="ui-table-action-text"
+            :class="['ui-table-action-text', item.disabledClassName, item._disabled && 'disabled']"
             type="text"
+            @click.stop="fireAction(item, $event)"
         >
-            {{item.text}}
+            {{ item.text }}
         </Wb-button>
     </div>
 </template>
 <script>
 import WbButton from '../button';
-
 export default {
     components: {
         WbButton
@@ -28,9 +28,25 @@ export default {
             default: undefined
         }
     },
+    computed: {
+        actions() {
+            return this.col.action.map((item) => {
+                let _disabled = false;
+                if (typeof item.disabled === 'boolean') {
+                    _disabled = item.disabled;
+                }
+                if (typeof item.disabled === 'function') {
+                    _disabled = item.disabled(this.trData);
+                }
+                return Object.assign({_disabled}, item);
+            })
+        }
+    },
     methods: {
         fireAction(item, event) {
-            this.$emit('on-click', item, this.trData, event);
+            if (!item._disabled) {
+                this.$emit('on-click', item, this.trData, event);
+            }
         }
     }
 };

packages/fes-ui/src/styles/components/table.scss

@@ -73,6 +73,10 @@ $table-head-background-color: $background-color-base;
         &:first-child {
             padding-left: 0;
         }
+        &.disabled {
+            cursor: not-allowed;
+            color: #657180;
+        }
     }
     .ui-table-column-sorter {
         margin-left: 4px;