查询按钮、表格按钮

自定义按钮

对照上面截图的名称看对应的按钮配置

[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
自定义按钮(vue3)
btnClick() {
    //可以获取选中的行数据
    //let rows= gridRef.getSelectRows();
    proxy.$message.success('点击了按钮');
}
const onInited = () => {
    //gridRef.buttons判断有没有某些按钮权限,如果有再添加自定义按钮
    // if ( gridRef.buttons.some((x) => {return x.value === 'Add'})) {
    //splice在第三个按钮后面添加一个按钮
    gridRef.buttons.splice(3, 0, {
        name: '自定义按钮', //按钮名称
        icon: 'el-icon-document', //按钮图标:组件示例->图标
        //primary、success、warning、error、info、text、danger
        type: 'primary',
        plain: true,
        onClick:()=> {
          btnClick();
        }
    })
    // }
}

表格按钮 1

对照上面截图的名称看对应的按钮配置

[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
表格按钮 1(vue3)
const priceBtnClick = (btnIndex, row, column, index, $e) => {
  $e.stopPropagation();
  proxy.$message.success("点击了第" + btnIndex + "个图标");
};
const onInited = () => {
  //价格按钮前面增加按钮
  columns.find((x) => {
    return x.field == "字段";
  }).render = (h, { row, column, index }) => {
    return (
      <div>
        <el-button
          link
          onClick={($e) => {
            priceBtnClick(1, row, column, index, $e);
          }}
          class="el-icon-search"
          style="color: #2196F3;cursor: pointer;"
        ></el-button>
        <el-button
          link
          onClick={($e) => {
            priceBtnClick(2, row, column, index, $e);
          }}
          class="el-icon-date"
          style="margin-left:1px;color: #2196F3;cursor: pointer;"
        ></el-button>
        <span style="margin-left:5px">{row.字段}</span>
      </div>
    );
  };
};

表格按钮 2

对照上面截图的名称看对应的按钮配置

[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
表格按钮(vue3)
const onInited = () => {
  //在表格备注前面加一个按钮
  let index = columns.findIndex((x) => {
    return x.field == "CustomerName";
  });
  //通过js语法操作数组添加按钮
  columns.splice(index, 0, {
    title: "按钮", //按钮名称
    field: "按钮",
    render: (h, { row, column, index }) => {
      return (
        <div>
          <el-button
            onClick={($e) => {
              $e.stopPropagation();
              proxy.$message.success("点击了表格按钮");
            }}
            style=" height:23px;padding: 0px 8px !important;"
            size="small"
            type="primary"
            plain
          >
            点击
          </el-button>
        </div>
      );
    },
  });
};

操作按钮

对照上面截图的名称看对应的按钮配置

[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现

查看代码
操作按钮(vue3)
const btn2Click = (row, column, index, $e) => {
  proxy.$message.success("点击按钮");
};
const btn1Click = (row, column, index, $e) => {
  proxy.$message.success("点击按钮");
  //可以直接调用编辑
  //proxy.edit(row)
};
const dropdownClick = (value, row, column, index, $e) => {
  proxy.$message.success("点击按钮组:" + value);
};
const onInited = () => {
  //表格上添加自定义按钮
  columns.push({
    title: "操作",
    field: "操作",
    width: 170,
    align: "center", // 'left',
    fixed: "right", //固定到最右边,也可以设置为left固定到左边
    render: (h, { row, column, index }) => {
      return (
        <div>
          <el-button
            onClick={($e) => {
              btn1Click(row, column, index, $e);
            }}
            type="primary"
            plain
            style="height:26px; padding: 10px !important;"
          >
            查看
          </el-button>

          {/* 通过条件判断,要显示的按钮 */}
          {/*  {
                    index % 2 === 1 
                    ?<el-button>修改</el-button>
                    : <el-button>设置</el-button>
                } */}

          {/* 通过v-show控制按钮隐藏与显示
            注意:v-show只是示例,如果不需要判断,将下面的v-show都去掉
            下面的index % 2 === 1换成:row.字段==值 */}
          <el-button
            onClick={($e) => {
              btn2Click(row, $e);
            }}
            v-show={index % 2 === 1}
            type="success"
            plain
            style="height:26px;padding: 10px !important;"
          >
            修改
          </el-button>

          <el-button
            onClick={($e) => {
              btn2Click(row, $e);
            }}
            v-show={index % 2 === 0}
            type="warning"
            plain
            style="height:26px;padding: 10px !important;"
          >
            设置
          </el-button>

          <el-dropdown
            trigger="click"
            v-slots={{
              dropdown: () => (
                ////这里也可以改为循环设置下按钮,其他按钮一样,使用map循环
                // [
                //   { name: "京酱肉丝", value: "1" },
                //   { name: "驴肉火烧", value: "2" }
                // ].map(x => {
                //   return <a>{x.name}</a>
                // })
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <div
                      onClick={($e) => {
                        dropdownClick("京酱肉丝", row, column, index, $e);
                      }}
                    >
                      京酱肉丝
                    </div>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <div
                      onClick={($e) => {
                        dropdownClick("驴肉火烧", row, column, index, $e);
                      }}
                    >
                      驴肉火烧
                    </div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              ),
            }}
          >
            <span
              style="font-size: 13px;color: #409eff;margin: 5px 0 0 10px;"
              class="el-dropdown-link"
            >
              更多<i class="el-icon-arrow-right"></i>
            </span>
          </el-dropdown>
        </div>
      );
    },
  });
};
************************************************************************************************************************

隐藏主表按钮

[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
vue3代码
const onInited = () => {
    gridRef.buttons.forEach(x=>{//name改为要隐藏的按钮名字
        if(x.name=='新建'){
          x.hidden=true;
        }
    })
    
    //隐藏自定义筛选按钮
    gridRef.showCustom=false;
    gridRef.showCustomSearch=false;
      //如果要隐藏明细表按钮,接着往下看
}
************************************************************************************************************************

明细表按钮、弹出框按钮

添加明细表按钮

对照上面截图的名称看对应的按钮配置

[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
明细表按钮(vue3)
const onInited = async () => {
  //弹出框添加明细表按钮(注意:弹出框明细表添加按钮需要写在onInited中)
  //使用unshift按钮添加到第一个位置,使用splice(2,0,{})添加到第二个按钮后面
  gridRef.detailOptions.buttons.unshift({
    //这里可以使用push添加最后一个位置
    name: "自定义按钮", //按钮名称
    icon: "el-icon-document", //按钮图标:组件示例->图标
    //primary、success、warning、error、info、text、danger
    type: "primary",
    plain: true,
    onClick: () => {},
  });

  //弹出框一对多二级明细表按钮,可以输出看里面的对象属性:console.log(this.details)
  details.forEach((x) => {
    if (x.table == "表名") {
      //添加按钮,操作同上
      x.buttons.push({});
    }
  });
  //弹出框一对多三级明细表按钮
  gridRef.subDetails.forEach((x) => {
    if (x.table == "表名") {
      //添加按钮,操作同上
      x.buttons.push({});
    }
  });
};

隐藏明细表按钮

对照上面截图的名称看对应的按钮配置

[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
隐藏明细表按钮(vue3)
//明细表按钮只能写在弹出框打开后方法隐藏
const modelOpenAfter = async (row, currentAction, isCopyClick) => {
  const isAdd = gridRef.currentAction == "Add"; //判断是否为新建操作
  //隐藏明细表按钮
  gridRef.detailOptions.buttons.forEach((btn) => {
    if (btn.name == "添加行") {
      btn.hidden = true;
      //或者设置只读
      //btn.readonly=true;
    }
  });

  //弹出框一对多二级明细表按钮,可以输出看里面的对象属性:console.log(this.details)
  details.forEach((x) => {
    if (x.table == "表名") {
      //隐藏一对多二级明细表按钮
      x.hidden = true;
    }
  });
  //弹出框一对多三级明细表按钮
  gridRef.subDetails.forEach((x) => {
    //操作同上
  });
};

明细表表格按钮


明细表表格按钮(vue3)
const onInited = async () => {
  //明细表按钮1
  const col = gridRef.detailOptions.columns.find((x) => {
    return x.field == "字段";
  });
  col.render = (h, { row, column, index }) => {
    return (
      <div>
        <el-button
          link
          onClick={($e) => {
            proxy.$message.success("按钮1");
          }}
          class="el-icon-search"
          style="color: #2196F3;cursor: pointer;"
        ></el-button>
        <el-button
          link
          onClick={($e) => {
            proxy.$message.success("按钮2");
          }}
          class="el-icon-date"
          style="margin-left:1px;color: #2196F3;cursor: pointer;"
        ></el-button>
        <span style="margin-left:5px">{row.字段}</span>
      </div>
    );
  };
  //明细表按钮
  gridRef.detailOptions.columns.push({
    title: "操作",
    field: "操作",
    width: 80,
    align: "center", // 'left',
    fixed: "right", //固定到最右边,也可以设置为left固定到左边
    render: (h, { row, column, index }) => {
      return (
        <div>
          <el-button
            onClick={($e) => {
              proxy.$message.success("明细表按钮");
            }}
            type="primary"
            plain
            style="height:26px; padding: 10px !important;"
          >
            选择数据
          </el-button>
        </div>
      );
    },
  });
};

弹出框(添加、隐藏按钮)


弹出框(添加、隐藏按钮)(vue3)
const onInited = async () => {
  //添加弹出框按钮
  //使用unshift按钮添加到第一个位置,使用splice(2,0,{})添加到第二个按钮后面
  gridRef.boxButtons.unshift({
    name: "自定义按钮", //按钮名称
    icon: "el-icon-document", //按钮图标:组件示例->图标
    //primary、success、warning、error、info、text、danger
    type: "primary",
    plain: true,
    onClick: () => {},
  });
  //隐藏弹出框按钮
  gridRef.boxButtons.forEach((btn) => {
    if (btn.name == "保存") {
      btn.hidden = true;
      //或者设置只读
      //btn.readonly=true;
    }
  });
  //也可以在弹出框打开后modelOpenAfter方法动态控制
};