going-client(一)表格单元格点击事件

我就是我 2023-06-22 07:23 5阅读 0赞

show-cloud是后台，going-client是对应的前台项目。  
going-client采用vue2的单也应用，具体技术细节不做介绍咯。这里记录下如何实现点击一个单元格触发相应的事件。

需求：点击下发单位名称，弹出下发单位明细列表  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]  
1、domain实体中定义相应字段

{ id: "canUseUnitNames", label: "下发单位名称",  width: 130,type:'custom',cellFun: "clickCanUseUnitCell",
        loadCellFun(value:any, rowId:any, myGrid:any) {
          return '<div style="color: #4A90E2;cursor: pointer" class="customerCell">' +
          value +
          "</div>"
        },
        config: {
          saveGroup:false,
          //标题
          title: "选择单位信息",
          //显示的tab页
          tabs: [{ id: "unit", active: true, accountSel: false }]
        }, },

*  关键是定义loadCellFun：该函数改变值的显示内容
 *  type为custom：渲染类型
 *  定义cellFun，cellFun为vue里面的method里面的一个方法名称

2、grid标签注册cellClick事件：

<go-single-grid
            :hasPagin="true"
            :hasToolBar="true"
            :queryUrl="queryUrl"
            :topHeight="10"
            ref="gridObj"
            id="roleGrid"
            :config="roleConfig"
            @cellClick="cellClick"
            @afterLoadData="afterLoadData"
            @switchEvent="switchEvent"
          ></go-single-grid>

3、定义clickCanUseUnitCell方法：

clickCanUseUnitCell({val,rowId}){
          alert(rowId)
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191214232955444.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXlvbmdsaWFuZ184MTM=,size_16,color_FFFFFF,t_70