feat✨: 自定义表单 表格布局 操作列按钮支持动态显隐

src/components/LowDesign/src/LowForm/components/FormTable.vue

@@ -61,7 +61,7 @@
                   index
                 )
               "
-              v-if="item.display"
+              v-if="item.display && menuBtnShow(item, scope.row, scope.index)"
             >
               <span v-if="item.icon" v-show="!btnParams.menuBtn[index]?.['loading']" class="mr-3px">
                 <Icon :size="14" :icon="item.icon" />
@@ -332,6 +332,19 @@ const addTable = () => {
   }
 }
 
+//按钮显隐处理
+const menuBtnShow = (btnItem, row, index) => {
+  if (index < 0) return true
+  const showStr = props.column.btnShowObj[btnItem.prop]
+  if (!showStr) return true
+  const bool = executeStrFunction(
+    showStr,
+    [row, index],
+    `${btnItem.label} 按钮显示/隐藏判断执行异常，请检查`
+  )
+  return bool
+}
+
 // 按钮事件处理
 const menuHandle = (menuData, btnIndex?) => {
   let { item, row, dataIndex, btnKey } = menuData

src/components/LowDesign/src/utils/example.ts

@@ -3,6 +3,7 @@ export interface exampleType {
   formJsEnhanceExample: string
   remoteExample: string
   buttonExample: string
+  formTableMenuButtonExample: string
   tabsEnhanceExample: string
   tableEnhanceExample: string
   tableConfigExample: string
@@ -60,6 +61,22 @@ export const buttonExample = `return {
   }
 }
 `
+//表单开发 表格布局 操作列按钮 其他配置模板
+export const formTableMenuButtonExample = `return {
+  //其他配置请参考element-plus button配置
+  type:'primary',
+  //当前按钮的点击事件
+  handleClick: (obj) => {
+    if (obj.loading) obj.loading() //关闭loading方法
+  },
+  //当前按钮显示/隐藏判断 注：按钮需要先配置可见
+  handleShow:(row)=>{
+    //row 当前行数据
+    return true
+  }
+}
+`
+
 /* 组件配置模板 */
 //选项卡布局 增强配置模板
 export const tabsEnhanceExample = `return {

src/components/LowDesign/src/utils/formUtil.ts

@@ -382,6 +382,7 @@ const initColumn = (column: object, control, ruleObj, componentData: Object, oth
         delete columnItem.params[key]
       })
       columnItem.btnClickObj = {}
+      columnItem.btnShowObj = {}
       for (const key in columnItem.btnData) {
         columnItem.btnData[key] = columnItem.btnData[key].map((item) => {
           const config = handleStrObj(item.configStr, `【${item.label}】 按钮配置格式异常，请检查`)
@@ -389,6 +390,10 @@ const initColumn = (column: object, control, ruleObj, componentData: Object, oth
             columnItem.btnClickObj[item.prop] = `${config['handleClick']}`
             delete config['handleClick']
           }
+          if (config['handleShow']) {
+            columnItem.btnShowObj[item.prop] = `${config['handleShow']}`
+            delete config['handleShow']
+          }
           delete item.configStr
           Object.assign(item, config)
           if (formType == 'view') {

src/components/LowFormDesign/components/DesignConfig/components/config/LayoutTable.vue

@@ -122,7 +122,7 @@
                           size="small"
                           v-model="element.configStr"
                           placeholder="按钮配置"
-                          @click="openBtnEditView(element, index)"
+                          @click="openBtnEditView(element, index, tabItem.prop)"
                         ></el-input>
                       </div>
                       <div class="btn-item flex-wrap">
@@ -232,7 +232,8 @@ const handleRemoveBtn = (index, prop) => {
 }
 const exampleObj = {
   tableEnhanceStr: example.tableEnhanceExample,
-  configStr: example.buttonExample
+  configStr: example.buttonExample,
+  configMenuStr: example.formTableMenuButtonExample
 }
 
 const openEditView = (prop, label) => {
@@ -251,7 +252,7 @@ const openEditView = (prop, label) => {
   }
   emit('open-med', { prop, label, params })
 }
-const openBtnEditView = (btnItem, index) => {
+const openBtnEditView = (btnItem, index, tabProp?) => {
   openMEDialog(
     {
       prop: 'configStr',
@@ -263,7 +264,10 @@ const openBtnEditView = (btnItem, index) => {
             name: `复制配置示例`,
             icon: 'solar:copy-outline',
             clickFun: () => {
-              emit('copy-text', exampleObj.configStr || '')
+              emit(
+                'copy-text',
+                tabProp == 'menu' ? exampleObj.configMenuStr : exampleObj.configStr || ''
+              )
             },
             params: {
               size: 'small',