el-cascader封装组件

最新推荐文章于 2025-04-22 17:32:03 发布

学不会•

最新推荐文章于 2025-04-22 17:32:03 发布

阅读量398

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41588991/article/details/130489883

文章展示了如何在Vue.js中封装一个级联组件(Cascader)，通过v-model绑定`search.orgName`来获取选中的值，并在`onFollowDeptArrChange`事件中更新label。组件使用了`el-cascader`，配置了value、label、children属性，并监听value的变化。数据从`treeSubOrg`API获取，并在选中时发射`getValue`事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现级联组件封装，并且拿到选中的value和label

<OrgTree v-model="search.orgName" title="招募机构" />

<!-- 机构组件 -->
<template>
  <div class="search-item">
    <label class="search-label">{{ title }}：</label>
    {{selectValue}} --- {{label}}
    <el-cascader class="w-220" ref='cascader' :options="dataOptions" :props="{
        value: 'id',
        label: 'orgName',
        children: 'children',
        checkStrictly: true,
      }" size="small" v-model="selectValue" placeholder="请选择" @change="onFollowDeptArrChange" popper-class="train-tree" clearable :show-all-levels="false">
    </el-cascader>
  </div>
</template>

<script>
import { treeSubOrg } from "@/axios/dataExport";
export default {
  data () {
    return {
      selectValue: "",
      dataOptions: [], //部门信息
      label: '' // 名称
    };
  },
  props: {
    value: {
      default: "",
    },
    title: {
      default: "机构名称",
    },
  },
  model: {
    prop: "value",
    event: "getValue",
  },
  watch: {
    value: {
      handler (v) {
        this.selectValue = v;
      },
      deep: true,
      immediate: true,
    },
  },
  created () {
    this.getTableList();
  },
  methods: {
    // 查询列表
    async getTableList () {
      const res = await treeSubOrg();
      if (res.code === 200) {
        if (res.data != null) {
          this.dataOptions = [res.data];
        }
      }
    },
    // 点击部门树的子节点并赋值
    onFollowDeptArrChange (event) {
      this.$emit("getValue", event);
      this.label = this.$refs.cascader.getCheckedNodes()[0].label
    },
  },
};
</script>

<style lang="less">
.train-tree .el-cascader-node__prefix {
  opacity: 0 !important;
}
</style>

需要注意的是，封装成组件，value会选中多个，所以需要取最后一项

search.orgName = search.orgName ? search.orgName[search.orgName.length - 1] : null