瀏覽代碼

表格操作按钮添加是否显示属性方法

ymy 2 年之前
父節點
當前提交
3913aea711
共有 2 個文件被更改,包括 27 次插入9 次删除
  1. 22 9
      src/benyun/components/byTable/byTable.vue
  2. 5 0
      src/views/demo/table.vue

+ 22 - 9
src/benyun/components/byTable/byTable.vue

@@ -12,6 +12,7 @@
       :align="attrs.align"
       :tree-config="{transform: attrs.transform, rowField: attrs.rowField, parentField: attrs.parentField}"
       :row-config="{isHover: true}"
+      :tooltip-config="{showAll: true}"
       style="width: 100%">
 
       <vxe-column v-if="attrs.checkbox" type="checkbox" width="50" fixed="left" />
@@ -27,14 +28,16 @@
         >
           <template #default="{ row }">
             <template v-if="item.plugins">
-              <span class="col-action" 
-                v-for="(pluginsItem,_index) of item.plugins" 
-                :key="'plu'+_index" 
-                v-hasPermi="[item.audit]" 
-                @click="pluginClick(pluginsItem,row)">
-                <i v-if="pluginsItem.icon" :class="pluginsItem.icon" ></i>
-                {{ pluginsItem.name }}
-              </span>
+              <template v-for="(pluginsItem,_index) of item.plugins" >
+                <span class="col-action" 
+                  :key="'plu'+_index" 
+                  v-hasPermi="[pluginsItem.audit]" 
+                  v-if="showPlugin(pluginsItem,row)"
+                  @click="pluginClick(pluginsItem,row)">
+                  <i v-if="pluginsItem.icon" :class="pluginsItem.icon" ></i>
+                  {{ pluginsItem.name }}
+                </span>
+              </template>
             </template>
           </template>
         </vxe-column>
@@ -46,6 +49,7 @@
           :width="item.width"
           :fixed="item.fixed"
           :align="item.align"
+          show-overflow="ellipsis"
           :tree-node="item.treeNode"
         >
           <template #default="{ row }">
@@ -149,7 +153,6 @@ export default class ByTable extends VueViews {
       }
     })
   }
-  
 
   //点击详情
   detail(row:any){
@@ -201,6 +204,16 @@ export default class ByTable extends VueViews {
       config.event.click(data)
     }
   }
+  //操作按钮是否显示
+  showPlugin(config:any,row:any){
+    if(config?.event?.show){
+      let data = (this as any).$lodash.cloneDeep(row)
+      delete data[this.key_id];
+      return config.event.show(data)
+    }
+
+    return true
+  }
 
   //组件值的变化
   onChange(val:any,row:any,code:string){

+ 5 - 0
src/views/demo/table.vue

@@ -51,6 +51,11 @@ export default class DemoTable extends Vue {
         name:'编辑',
         audit:'',
         event:{
+          show:(item:any) => {
+            //是否显示该按钮
+            console.log('该行数据:',item);
+            return false
+          },
           click:(item:any) => {
             console.log('该行数据:',item)
           }