主要是会用到 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] 了