Cascader 级联选择器

最新推荐文章于 2025-03-17 16:45:29 发布

tang0109

最新推荐文章于 2025-03-17 16:45:29 发布

阅读量405

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_51608296/article/details/117534678

版权

本文介绍了Cascader级联选择器在表单验证中的应用，并提供了一个名为tranListToTreeData的函数，该函数通过递归方式将列表数据转换为树形结构，以便更好地进行级联选择。当找到具有指定pid（父ID）的项时，它会将子节点添加到父节点的children属性中，从而构建树形结构。

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

这个是表单验证的一部分，

Cascader 级联选择器

<el-form ref="form" :model="formData" :rules="rules" label-width="120px">
<el-form-item label="部门" prop="departmentName">
        <!-- <el-input v-model="formData.departmentName" style="width:50%" placeholder="请选择部门" @focus="getDepartments" /> -->
        <!-- <el-tree
          v-if="true"
          v-loading="loading"
          :data="treeData"
          default-expand-all=""
          :props="{ label: 'name' }"
          @node-click="selectNode"
        /> -->
        <el-cascader
          v-model="formData.departmentName"
          v-loading="loading"
          :options="treeData"
          :props="{label:'name',expandTrigger: 'hover', value:'name'}"
          :show-all-levels="false"
          style="width:50%"
          @visible-change="getDepartments"
        />
      </el-form-item>
</el-form>
<!-- footer插槽 -->
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button type="primary" size="small" @click="btnOK">确定</el-button>
        </el-col>
      </el-row>
    </template>

<script>
// 获取部门数据
import { addEmployee } from '@/api/employees'
import { getDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils'
import EmployeeEnum from '@/api/constant/employees'
export default {
  data() {
    return {
      // 表单数据
      treeData: [], // 定义数组接收树形数据
      //   showTree: false, // 控制树形的显示或者隐藏
      loading: false, // 控制树的显示或者隐藏进度条
      formData: {
        departmentName: '',
      },
      rules: {
        departmentName: [{ required: true, message: '部门不能为空', trigger: 'change' }],
      }
    }
  },

  methods: {

    async getDepartments(isOpen) {
      if (!isOpen) return
      this.loading = true
      const { depts } = await getDepartments()
//格式化数据为属性组织结构   tranListToTreeData函数如最后
      this.treeData = tranListToTreeData(depts, '')
      this.loading = false
    },

//点击取消按钮
    btnCancel() {
//调用父组件的showDialog 属性关闭弹层
      this.$parent.showDialog = false
    },
//点击确认按钮
    async btnOK() {
      try {
//手动表单验证
        await this.$refs.form.validate()
//调用添加员工接口
        await addEmployee(this.formData)
        this.$parent.getEmployeeList()
        this.$parent.showDialog = false
      } catch (error) {
        console.log('error', error)
      }
    }

  }
}
</script>

tranListToTreeData函数

/**

* 将数据转换为树形结构

* 使用递归的方法

*/

export function tranListToTreeData(list, rootValue) {

  const treeArr = []

  list.forEach(item => {

    if (item.pid === rootValue) {

      const children = tranListToTreeData(list, item.id)

      if (children.length > 0) {

        // 如果children的长度大于0 说明找到了子节点

        item.children = children

      }

      // 将内容加入到数组中

      treeArr.push(item)

    }

  })

  // console.log(treeArr)

  return treeArr

}