主要是会用到 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键关闭编辑功能
}"
border
keep-source
show-overflow
height="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-cascader
v-model="row.materialNm"
placeholder="请输入品类"
:options="materialNmOptions"
:show-all-levels="false"
filterable
ref="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] 了