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

最新推荐文章于 2024-08-21 17:23:56 发布

alikami

最新推荐文章于 2024-08-21 17:23:56 发布

阅读量252

点赞数 2

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/alikami/article/details/141346710

版权

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