当前位置: 首页> 汽车> 行情 > 【Element Ui】在 vxe-table 中使用 el-cascader,退出编辑状态显示 label 值

【Element Ui】在 vxe-table 中使用 el-cascader,退出编辑状态显示 label 值

时间:2025/7/11 10:44:54来源:https://blog.csdn.net/alikami/article/details/141346710 浏览次数: 0次

主要是会用到 el-cascader 的 getCheckedNodes 方法

官网:

el-cascader:Cascader 级联选择器 | Element Plus

vx-table:Vxe Table v4

具体代码如下:

 <vxe-table:clip-config="clipConfig":area-config="{multiple:true,excludeFields:['operate'],extendByCalc:true,  // 自动填充extendByCopy:true}":keyboard-config="{isClip: true,isEdit: true,isEnter: true,isShift:true,isMerge:true,isDel: true,isFNR:true,arrowCursorLock:true,isEsc: true // 是否开启Esc键关闭编辑功能}"borderkeep-sourceshow-overflowheight="100%":data="tableData":column-config="{resizable: true}":edit-config="{trigger: 'dblclick',mode: 'row'}":mouse-config="{area:true,extension: true}"ref="tableRef"stripe@cell-click="cellClick"@cell-dblclick="cellDblClick"@edit-closed="closeEdit"@paste.native="pasteInfo($event)"v-loading="tableLoading":cell-class-name="cellClassName">//  主要代码在这里<vxe-column align="center" field="materialNm" :min-width="140" :edit-render="{ name:'input'}"><template #header><span style="color: red">* </span><span>品类</span></template><template #default="{ row }"><div>{{row.materialNmId}}</div></template><template #edit="{ row }"><el-cascaderv-model="row.materialNm"placeholder="请输入品类":options="materialNmOptions":show-all-levels="false"filterableref="cascader":props="materialProp"clearable@change="changeMaterialNmId(row)"/></template></vxe-column>......

获取的 materialNmOptions 格式,如果用的不是 value 和 label ,可以通过设置 props 去改变
props:https://element-plus.org/zh-CN/component/cascader.html#cascaderprops

const materialProp = ref({emitPath: false,  // 为false就只展示这一个节点value:'id',  // 因为我的数据返回的字段是id,所以需要这样改
})

用来展示的 label 和实际获取的 value 需要分开控制

/** 输入品类后 */
function changeMaterialNmId(row){if(row.materialNm){/** 最关键的一步就是获取到label之后再赋值到另一个字段用来展示 */row.materialNmId= proxy.$refs['cascader'].getCheckedNodes()[0].label}else{row.materialNmId= null}
}

因为我只取一个节点,所以直接取 getCheckedNodes()[0] 了

关键字:【Element Ui】在 vxe-table 中使用 el-cascader,退出编辑状态显示 label 值

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: