vue-treeselect的基本使用以及如何更改id以及label的绑定值

这篇具有很好参考价值的文章主要介绍了vue-treeselect的基本使用以及如何更改id以及label的绑定值。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、最主要的几点就是

1、绑值:value=“form.astdeptId”,主要绑的就是id,通过id找到对应的label回显

2、options是数据源,正常调接口获取就行了

3、append-to-body="true"这个最好加上,可能会遇到下拉的弹窗打不开或者只有一点点高的情况

4、(******) normalizer属性就是把我们自己的后端返的数据格式按树插件需要的格式转换

tenantIdnormalizer(node) {
  if (node.children && !node.children.length) {
    delete node.children
  }
  return {
    id: node.id,
    label: node.name,
    children: node.children
  }
},

5、select点击事件里赋值

6、插槽slot=“option-label” 是下拉框的值

7、插槽slot=“value-label” 是输入框回显的值

二、引入

import XTreeselect from ‘@riophae/vue-treeselect'
// 样式
import ‘@riophae/vue-treeselect/dist/vue-treeselect.css'

三、使用文章来源地址https://www.toymoban.com/news/detail-784719.html

<!--
 * @Description: ------ 文件描述 ------
 * @Creater: snows_l snows_l@163.com
 * @Date: 2023-02-03 16:37:11
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2023-02-06 11:05:57
 * @FilePath: /lg-ebt-backend-vue-top2-2/package/module/system/src/views/approvalManage/approvalEdit/Dialog.vue
-->
<template>
  <el-dialog
    title="编辑流程"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
  >
    <el-form
      ref="personalForm"
      size="small"
      :model="baseInfo"
      :rules="rules"
      label-position="right"
      label-width="120px"
    >
      <el-row class="pd20">
        <el-col :span="18">
          <el-form-item label="审批流程名称:" prop="approvalName">
            <span>{{ baseInfo.approvalName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="人员选择:" prop="approvalPersnal">
            <x-tree-select
              v-model="baseInfo.approvalPersnal"
              :multiple="true"
              :options="optionss"
              placeholder="请选择人员"
              :normalizer="tenantIdnormalizer"
            >
              <div
                slot="option-label"
                slot-scope="{ node }"
                style="white-space: nowrap; font-size: 14px"
              >
                {{ node.raw.name ? node.raw.name + "-snows" : "" }}
              </div>
              <div slot="value-label" slot-scope="{ node }">
                {{ node.raw.name ? node.raw.name + "-s" : "" }}
              </div>
            </x-tree-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import XTreeSelect from "@riophae/vue-treeselect"
// import the styles
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
export default {
  name: "",
  components: {
    XTreeSelect
  },
  data() {
    return {
      dialogVisible: false,
      baseInfo: {
        approvalName: "",
        approvalPersnal: []
      },
      options: [
        {
          id: 1,
          name: "东南",
          children: [
            {
              id: 2,
              name: "上海",
              children: [
                { id: 3, name: "普陀" },
                { id: 4, name: "黄埔" },
                { id: 5, name: "徐汇" }
              ]
            },
            {
              id: 7,
              name: "江苏",
              children: [
                { id: 8, name: "南京" },
                { id: 9, name: "苏州" },
                { id: 10, name: "无锡" }
              ]
            },
            {
              id: 12,
              name: "浙江",
              children: [
                { id: 13, name: "杭州" },
                { id: 14, name: "宁波" },
                { id: 15, name: "嘉兴" }
              ]
            }
          ]
        },
        {
          id: 17,
          name: "西北",
          children: [
            {
              id: 18,
              name: "陕西",
              children: [
                { id: 19, name: "西安" },
                { id: 20, name: "延安" }
              ]
            },
            {
              id: 21,
              name: "新疆维吾尔族自治区",
              children: [
                { id: 22, name: "乌鲁木齐" },
                { id: 23, name: "克拉玛依" }
              ]
            }
          ]
        }
      ],
      
    }
  },

  created() {},

  methods: {

    tenantIdnormalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    },
  }
}
</script>

<style lang="scss" scoped></style>

到了这里,关于vue-treeselect的基本使用以及如何更改id以及label的绑定值的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue Treeselect树形下拉框的使用

        昨天在做一个表单,里面有一项是以tree形式为选项的select框↓      于是乎,用到了vue中的treeselect组件,在此记录一下。 1、绑值, :value=“form.astdeptId”,主要绑的就是id或者code,通过id或code找到对应的label回显 2、options是数据源,正常调接口获取就行了 3、append-to-bo

    2024年02月06日
    浏览(39)
  • [vue3] Tree/TreeSelect树形控件使用

     ✨✨个人主页:沫洺的主页 📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏                             📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏                            📖Docker专栏📖Reids专栏📖MQ专栏📖SpringCl

    2024年02月08日
    浏览(50)
  • 微信小程序页面-筛选栏固定定位,以及使用Vant中TreeSelect控件遇到的问题

     布局思路:         1、顶部是状态栏,接着筛选栏。         2、点击【选择年份】和【选择月份】,会从底部弹出picker;点击【筛选】,则会出现遮罩层,并显示侧边导航(会议类型筛选项),和按钮。        3、 因筛选项也要固定定位,接在状态栏下面,因此可

    2024年02月13日
    浏览(46)
  • monaco-editor基本使用以及monaco-editor封装成vue组件

    以vue2项目为例 安装依赖 配置vue.config.js 使用monaco-editor前,需要先准备一个容器来挂载monaco-editor实例 创建monaco-editor实例 使用monaco.editor.create方法创建monaco-editor实例,create方法的第一个参数接收一个dom元素,第二个参数可选,接收一个IStandaloneEditorConstructionOptions配置对象 关

    2024年02月06日
    浏览(42)
  • Nest的基本概念,以及如何使用Nest CLI来构建一个简单的Web应用程序

    Nest是一个用于构建高效、可扩展的Node.js服务器端应用程序的框架。它是基于Express.js构建的,并且提供了多种新特性和抽象层,可以让开发者更加轻松地构建复杂的应用程序。 本文将介绍Nest的基本概念,以及如何使用Nest CLI来构建一个简单的Web应用程序。 模块 在Nest中,模块

    2024年02月02日
    浏览(110)
  • [VUE]Element_UI 实现TreeSelect 树形选择器

    最近在做一个人员管理系统,在增改用户信息时,可能会设置用户所在的部门,因为部门是多级的,于是想到用Element_UI的TreeSelect组件实现 效果: 安装完成后,打开package.json 可以看到@riophae/vue-treeselect的版本: 在需要使用TreeSelect的组件中引入 并将Treeselect加到components中:

    2024年02月09日
    浏览(40)
  • 如何更改vue项目窗口的标题title和图标icon

    背景 :由以下代码知,Vue CLI创建的项目窗口的标题默认是打包后的项目名称,默认图标是Vue的图标favicon.ico。那么特定项目如何根据需要在窗口展示相应的项目标题和项目图标呢? 解决方法: 修改图标:直接将新图标导入public文件夹,然后将favicon.ico替换为新图标的名字即

    2024年02月15日
    浏览(51)
  • vue里面customRender 和 scopedSlots如何同时使用以及遇到的问题

    在做一个数据表格合并并且涉及到某些地方需要有输入框的操作 2.改了以后 项目直接报错了,提示 You have to use JSX Expression inside your v-model 通过原生返回的标签里面不能写v-model进行双向绑定 svalInp = a-input v-model=“row.sval” onChange={(e) = this.handleSval(e, row, index)} / 把这块代码改一

    2024年02月16日
    浏览(42)
  • Element树型下拉框/vue2树型下拉框/TreeSelect/树型下拉

            今天小谭要给大家分享的是基于element ui 的下拉框和树型控件二次分装的树型下拉框,element plus新增了这一组件,但是对于还在使用vue2的我来说,就很不友好。组件可以实现单选和多选,以及其他常用功能,废话不多说,直接上效果图: 效果图如上,接下来实现代码

    2024年02月13日
    浏览(46)
  • CKEditor5+vue3使用以及如何添加新工具栏,自定义设置字体fontFamily

    官网地址:https://ckeditor.com/ckeditor-5/online-builder/ 官网提供了以下几种模式,一般使用经典模式居多,具体差别可访问官网自己试一下。 基本的使用方法(经典模式),先别急着操作,看完再决定使用哪种方法。 代码 效果如图 以上基本的工具栏配置比较少,如果基本的满足你的

    2024年02月10日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包