精华内容
下载资源
问答
  • vue element ui树形控件
    2021-11-05 16:17:14
     defaultProps: {
            children: "children",
            label: "name"
    }, //格式绑定
      memberlist: [], //列表
      permissionIds: [], // 半勾选+全勾选
      checkPermissionIds: [], //全勾选
    
    <el-tree
          ref="tree"
          :data="memberlist"
          :default-checked-keys="checkPermissionIds"
          :props="defaultProps"
          node-key="id"
          show-checkbox
          @check-change="handleCheckChange"
     ></el-tree>
    
     handleCheckChange() {
          this.checkPermissionIds = this.$refs.tree.getCheckedKeys();
          console.log(this.checkPermissionIds, "全勾选");
          this.permissionIds = [
            ...this.$refs.tree.getCheckedKeys(),
            ...this.$refs.tree.getHalfCheckedKeys()
          ];
          console.log(this.permissionIds, "半勾选+全勾选");
        },
    
     //清除上次默认勾选
     closeDialog() {
          this.$refs.tree.store.defaultCheckedKeys = [];
     },
    
    更多相关内容
  • Vue自定义树形控件

    千次阅读 2019-05-09 20:36:21
    /*自定义树形控件的核心就是“组件自己调用自己” 这里将树形控件封装成一个子组件*/ <div :style="indent" @click="toggleChildren"> //toggleChildren事件为“展开内容”、“关闭内容”的控制事件 /* ...

    效果图:
    在这里插入图片描述
    数据结构:

          tree: {
            title: '', //  标题(姓名) 
            key: '0',
            head: '', // 头像
            selectStatus: false, // checkBox选中状态
            children: [
              {
                title: '旺旺一部',
                key: '0-0',
                head: '',
                selectStatus: false,
                children: [
                  {
                    key: '0-0-0',
                    title: '旺仔1',
                    head: require('@/assets/wan.jpg'),
                    selectStatus: false
                  }
                ]
              },
              {
                title: '旺旺二部',
                key: '0-1',
                head: '',
                selectStatus: false,
                children: [
                  {
                    title: '旺旺二部一队',
                    key: '0-1-0',
                    head: '',
                    selectStatus: false,
                    children: [
                      {
                        title: '旺旺二部一队一班',
                        key: '0-1-0-2',
                        head: '',
                        selectStatus: false,
                        children: [
                          {
                            title: '旺仔3',
                            key: '0-1-0-2-0',
                            head: require('@/assets/wan.jpg'),
                            selectStatus: false
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
    

    思路:

    /*自定义树形控件的核心就是“组件自己调用自己”  这里将树形控件封装成一个子组件*/
    <template>
      <div>
        <div class="tree-custom">
          <div :style="indent" @click="toggleChildren"> //toggleChildren事件为“展开内容”、“关闭内容”的控制事件  
          	/* 
          	这里是递归数据显示的具体内容    
          	例如:本项目递归的具体内容从效果图上看就是“图片/头像”、“标题/名字”、“null/CheckBox”
          	效果图显示逻辑是:
          	<div v-if="!headImg && label" >
          	//如果没有头像图片有标题,则显示 “箭头-标题”样式
            </div>
            <div v-if="headImg">
          	//如果有头像图片,则显示 “头像-姓名-checkBox”样式
            </div>
          	*/			   
          </div>
          <tree-custom  // “自己调用自己”
            :key="children.key"  // key值唯一 
            v-for="children in treeData"  
            v-if="showChildren"  //  根据 toggleChildren事件 判断是否展开内容
            :treeData="children.children"   //  下面都是一些属性,应该都能看懂吧!不多说了!
            :label="children.title"
            :headImg="children.head"
            :pkid="children.key"
            :depth="depth+1"  //  这个是用来控制每行缩进的样式,可移步下方=>indent ()看具体用处
            :selectStatus="children.selectStatus"
            v-bind="$attrs"  //  这两个是用来实现祖孙组件通信的
            v-on="$listeners"
          >
          </tree-custom>
        </div>
      </div>
    </template>
    <script>
    export default {
      name: 'TreeCustom', // 要给我们的组件一个名字!不然怎么调用呢
      data () {
        return {
          showChildren: true,  // 这个就是控制是否显示内容的data~也就是展开和收起!
          currentInfoData: {} // 这个的用处是获取当前行的数据,为了简洁在上方代码的具体用处已经被我删掉了~意义不大
        }
      },
      //对象的默认值应由一个工厂函数返回,避免采坑
      props: {
        treeData: {
          type: Array,
          default: () => []
        },
        label: {
          type: String,
          default: () => ''
        },
        depth: {
          type: Number,
          default: () => 0
        },
        headImg: {
          type: String,
          default: () => ''
        },
        pkid: {
          type: String,
          default: () => ''
        },
        selectStatus: {
          type: Boolean,
          default: () => null
        }
      },
      computed: {
        indent () {  // 定义不同层级的缩进样式
          return { transform: `translate(${(this.depth - 1) * 15}px)` }
        }
      },
      methods: {
        toggleChildren () {
          this.showChildren = !this.showChildren
        },
        checkBoxSelectChange (e) {
          const checked = e.target.checked
          if (checked) {
           //使用$listeners方法调用祖辈的函数,因为这边是递归组件所以组件之间可能并不是严格的父子关系,所以$emit、$parent等方法都是不合适的
            this.$listeners.addSelectedData(this.currentInfoData)
          }
          if (!checked) {
            this.$listeners.deleteSelectedData(this.currentInfoData)
          }
        },
        getCurrentInfo (label, headImg, pkid) {
          this.currentInfoData = {
            key: pkid,
            title: label,
            head: headImg
          }
        }
      }
    }
    </script>
    
    /*组件调用方法*/
    <div class="tree-scroll">
      <tree-custom
        :label="tree.title"
        :headImg="tree.head"
        :treeData="tree.children"
        :pkid="tree.key"
        :depth="0"
        :selectStatus="tree.selectStatus"
        @addSelectedData="addSelectedData"
        @deleteSelectedData="deleteSelectedData" />
    </div>
    
    展开全文
  • 基于Vue自定义树形tableCard
  • Ant Design of Vue 树形控件 a-tree 自定义

    千次阅读 2021-04-30 15:49:56
    项目需求 首先返回的数据里 一定要有这个属性 scopedSlots = {title: "custom"} 这个代表我可以编辑想改的菜单 注意:只限加了这个属性的菜单 <template slot="custom" slot-scope="{ title }">...

    项目需求
    在这里插入图片描述

    首先返回的数据里 一定要有这个属性 scopedSlots = {title: "custom"} 这个代表我可以编辑想改的菜单
    注意:只限加了这个属性的菜单
    在这里插入图片描述

    <template slot="custom" slot-scope="{ title }">
    	{{title + 11111}}
    </template>
    

    注意 :
    slot=“custom” 固定写法
    slot-scope 里存放的是属性名还有特性名 例如 selected代表是否选中 用到啥就写啥
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • element-ui树形控件:地址在原文档中有个案例是有新增和删除功能,但是后来发现其修改的数据并不能直接影响到树形数据,所以采用了 render-content 的API重新写了个组件。写个开发的步骤,所以文章比较长emmm2018.07...

    element-ui树形控件:地址

    在原文档中有个案例是有新增和删除功能,但是后来发现其修改的数据并不能直接影响到树形数据,所以采用了 render-content 的API重新写了个组件。

    写个开发的步骤,所以文章比较长emmm

    2018.07.25更新

    elementUI ^2.2.0提供了一个slot的自定义节点方法,相关代码已在github更新,原理一样。

    大致效果如图:

    1.省市API

    在网上复制了个省市的list,有两个属性是新增的

    isEdit:控制编辑状态

    maxexpandId:为现下id的最大值

    export default{

    maxexpandId: 95,

    treelist: [{

    id: 1,

    name: "北京市",

    ProSort: 1,

    remark: "直辖市",

    pid: '',

    isEdit: false,

    children: [{

    id: 35,

    name: "朝阳区",

    pid: 1,

    remark: '',

    isEdit: false,

    children: []

    }]

    }{...}]

    }

    2.el-tree Component基本

    咱们一步步来,先写个饿了么的组件

    v-if="isLoadingTree"

    :data="setTree"

    node-key="id"

    highlight-current

    :props="defaultProps"

    :expand-on-click-node="false"

    :render-content="renderContent"

    :default-expanded-keys="defaultExpandKeys">

    同时引入API和节点渲染的组件

    import TreeRender from '@/components/tree_render'

    import api from '@/resource/api'

    然后搭建好基础

    data(){

    return{

    maxexpandId: api.maxexpandId,//新增节点开始id

    non_maxexpandId: api.maxexpandId,//新增节点开始id(不更改)

    isLoadingTree: false,//是否加载节点树

    setTree: api.treelist,//节点树数据

    defaultProps: {

    children: 'children',

    label: 'name'

    },

    defaultExpandKeys: [],//默认展开节点列表

    }

    },

    添加个渲染的method

    methods: {

    renderContent(h,{node,data,store}){

    let that = this;//指向vue

    return h(TreeRender,{

    props: {

    DATA: data,//节点数据

    NODE: node,//节点内容

    STORE: store,//完整树形内容

    },

    on: {//绑定方法

    nodeAdd: ((s,d,n) => that.handleAdd(s,d,n)),

    nodeEdit: ((s,d,n) => that.handleEdit(s,d,n)),

    nodeDel: ((s,d,n) => that.handleDelete(s,d,n))

    }

    });

    },

    handleAdd(s,d,n){//增加节点

    console.log(s,d,n)

    },

    handleEdit(s,d,n){//编辑节点

    console.log(s,d,n)

    },

    handleDelete(s,d,n){//删除节点

    console.log(s,d,n)

    }

    }

    3.tree_render Component基本

    渲染组件:

    {{DATA.name}}

    添加好几个按钮(element-ui自带icon:地址)对应的方法:

    export default{

    props: ['NODE', 'DATA', 'STORE'],

    methods: {

    nodeAdd(s,d,n){//新增

    this.$emit('nodeAdd',s,d,n)

    },

    nodeEdit(s,d,n){//编辑

    this.$emit('nodeEdit',s,d,n)

    },

    nodeDel(s,d,n){//删除

    this.$emit('nodeDel',s,d,n)

    }

    }

    }

    4.改

    我们用isEdit来切换input和span的显示状态,首先加个input:

    :ref="'treeInput'+DATA.id"

    v-model="DATA.name">

    {{DATA.name}}

    编辑的时候按钮同时消失,那么什么时候编辑完成呢?

    编辑完按enter键=》监听input的enter输入

    点击其他节点=》input失焦-blur=》编辑时自动聚焦-focus

    点击当前节点范围

    当以上三点发生一项,节点对应的data都要isEdit = false;

    enter键

    添加方法:

    //tree_render component

    methods: {

    nodeEditPass(s,d,n){

    d.isEdit = false;

    }

    }

    focus or blur

    后来发现第一次编辑时能让input聚焦,点击第二个input就不起作用了,加了autofocus属性也同样如此。所以我们要在点击编辑icon的时候,用原生的input autofocus。

    修改方法:

    //tree_render component

    nodeEdit(s,d,n){//编辑

    d.isEdit = true;

    this.$nextTick(() => {

    this.$refs['treeInput'+d.id].$refs.input.focus()

    })

    this.$emit('nodeEdit',s,d,n)

    }

    当前节点点击

    采用el-tree已有的API——node-click

    添加methods:

    //el-tree component

    methods: {

    handleNodeClick(d,n,s){//点击节点

    d.isEdit = false;//放弃编辑状态

    }

    }

    问题来了,如果在编辑状态下点击此节点也同样会影响input,这就无法进入编辑,所以要阻止input事件冒泡:

    添加methods:

    //tree_render component

    methods: {

    nodeEditFocus(){}

    }

    v-show代替v-if

    这里有个新的问题,当用户经常编辑修改,v-if模板的开销更高,所以改用v-show。而后者不支持template模板,所以要适当调整一下位置:

    v-model="DATA.name"

    :ref="'treeInput'+DATA.id"

    @click.stop.native="nodeEditFocus"

    @blur="nodeEditPass(STORE,DATA,NODE)"

    @keyup.enter.native="nodeEditPass(STORE,DATA,NODE)">

    {{DATA.name}}

    5.增

    新增节点 =》添加一条数据

    新增的同时展开父节点

    是否考虑无限新增

    //el-tree component

    handleAdd(s,d,n){//增加节点

    console.log(s,d,n)

    if(n.level >=6){

    this.$message.error("最多只支持五级!")

    return false;

    }

    //添加数据

    d.children.push({

    id: ++this.maxexpandId,

    name: '新增节点',

    pid: d.id,

    isEdit: false,

    children: []

    });

    //展开节点

    if(!n.expanded){

    n.expanded = true;

    }

    }

    新增节点字体加粗 =》给节点添加一个class =》 如何判断是否新增?

    我们有一个参数maxexpandId

    给tree_render添加一个prop:

    //el-tree component

    renderContent(h,{node,data,store}){//加载节点

    let that = this;

    return h(TreeRender,{

    props: {

    ...

    maxexpandId: that.non_maxexpandId

    },

    on: {...}

    });

    }

    根据id判断:

    //tree_render component

    props: ['NODE', 'DATA', 'STORE', 'maxexpandId']

    :class="[DATA.id > maxexpandId ? 'tree-new tree-label' : 'tree-label']"

    :ref="'treeLabel'+DATA.id">

    {{DATA.name}}

    .tree-expand .tree-label.tree-new{

    font-weight:600;

    }

    6.删

    跟新增同义:删除节点 =》删除一条数据

    新增节点直接删除

    已有节点需提示再删除

    已有子级节点不能删除

    handleDelete(s,d,n){//删除节点

    console.log(s,d,n)

    let that = this;

    //有子级不删除

    if(d.children && d.children.length !== 0){

    this.$message.error("此节点有子级,不可删除!")

    return false;

    }else{

    //删除操作

    let delNode = () => {

    let list = n.parent.data.children || n.parent.data,

    //节点同级数据,顶级节点时无children

    _index = 99999;//要删除的index

    list.map((c,i) => {

    if(d.id == c.id){

    _index = i;

    }

    })

    let k = list.splice(_index,1);

    //console.log(_index,k)

    this.$message.success("删除成功!")

    }

    let isDel = () => {

    that.$confirm("是否删除此节点?","提示",{

    confirmButtonText: "确认",

    cancelButtonText: "取消",

    type: "warning"

    }).then(() => {

    delNode()//此处可通过ajax做删除操作

    }).catch(() => {

    return false;

    })

    }

    //新增节点直接删除,否则要通过请求数据删除

    d.id > this.non_maxexpandId ? delNode() : isDel()

    }

    }

    7.拓展

    还有一些特别的需求,例如:

    点击高亮的时候显示icon

    .expand-tree .is-current>.el-tree-node__content .tree-btn,

    .expand-tree .el-tree-node__content:hover .tree-btn{

    display: inline-block;

    }

    添加顶级节点

    添加按钮:

    添加顶级节点

    添加methods:

    //el-tree component

    methods: {

    handleAddTop(){

    this.setTree.push({

    id: ++this.maxexpandId,

    name: '新增节点',

    pid: '',

    isEdit: false,

    children: []

    })

    }

    }

    默认展开树形第一级

    //el-tree component

    mounted(){

    this.initExpand()

    },

    methods: {

    initExpand(){

    //isLoadingTree用意也是在此

    this.setTree.map((a) => {

    this.defaultExpandKeys.push(a.id)

    });

    this.isLoadingTree = true;

    },

    }

    8.github

    还有些具体的样式都放在github了

    如有错漏,欢迎指正╰(◕ ▽ ◕)╯

    展开全文
  • 需求: vue-cli项目树形控件:一级节点为本地节点,默认展开一级节点,增删改后局部刷新数据。 增加节点,点击确定后局部刷新,渲染新数据。 源码 element组件样式 <el-tree class="treeitems" :data="data...
  • 最近开发一个审批小项目,需要加载人员树,发现成型...树形子组件: <ul> <li class="treeitem" v-for="(item, index) in treedata" :key='index'> <span>{{item.name}}</span> <Tree v
  • 1.引用树状控件 <FormItem label="业务部件名称:" prop="compoName"> <Input v-model="childForm.compoName" icon="ios-menu" readonly placeholder="请点击图标选择" @on-click="chooseCompoCode"/&...
  • vue 实现自定义树状结构图 可动态添加、删除 可整体拖拽 如需内容也为动态,把组件内容使用input、select等组件替换 数据结构 treeData: [{ name: '1', child: [ { name: '2', child: [{ name: '1' }, { ...
  • 记录几款vue的Tree树形控件

    万次阅读 2019-07-05 16:25:30
    一:Vue Beauty url:https://fe-driver.github.io/vue-beauty/#/components/tree 特色:找了很多个框架,只有Vue Beauty是带连接线的,刚好项目能用上。...特点:有比较多的可自定义的地方,这个很好。 ...
  • vue自定义树形选择

    2020-09-02 22:45:38
    1.引用组件 <template> <div class="h100 treeLeft radius5 hidden"> <div class="treeLeftDom relative paddingB20 h100 w100"> <div class="absolute w100 treeTop flex justify-...
  • 在项目中用到菜单项编辑删除,在 element-ui自定义节点内容时, 有说明:使用render-content指定渲染函数, 得环境支持 JSX 语法,只要正确地配置了相关依赖,就可以正常运行。 一,下面安装依赖: cnpm ...
  •  因为项目需要用Vue做一个管理系统,其中有一个公司部门的管理页面有用到ElementUI 的树形控件,但是结构中没有使用chexkBox选项框,针对这个功能碰到的一些问题做一下总结 一,数据渲染 1)在标签中绑定data属性 ...
  • 主要介绍了vue.js element-ui tree树形控件改iview的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 使用vue自定义组件实现树形列表

    千次阅读 2018-09-27 19:49:18
    最近公司做新项目用的是vue,有一个功能做一个树形列表由于之前一直用的是jquery操作dom,刚接触vue走了不少弯路,特意写博客记录一下 一、js自定义一个组件    &lt;script type="text/template" ...
  • 项目需求,要自己封装一个树形插件来模拟后端的类 期间遇到了几个问题 1) 添加子节点时,原来触发的事件不生效了 解决方案: if (!item.children) { this.$set(item, 'children', []) this.$set(item, 'expand',...
  • vue中通过element树形控件来实现树形表格的效果 通过缩进来实现近似树形表格的效果 实现效果图 安装依赖 $ npm install element-plus --save Element官网 自定义树形控件 分析图中控件分布,每个参数都有固定的...
  • <a-tree show-icon :icon="getIcon" :tree-data="treeData" > </a-tree> ...getIcon (props) { const { expanded } = props ...a-icon class="file" type="file-text" />...a-icon type={expanded
  • 要想实现每行选项都加上+、-、/符号要通过自定义来实现,在这我选择renderContent方法 renderContent(h, { node, data, store }) { return ( <span class="custom-tree-node"> <span>{node.label}&...
  • vue+ElementUI自定义tree树形控件小图标

    万次阅读 2019-05-31 16:53:39
    Element-ui自带的图标库还是不够全,还是需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下 教程: ...登录>图标管理>我的项目 ...2.进入到我的项目里(第一次进可以新建项目) ...
  • 我们使用树形控件在编辑时候有时候,会遇到回显数据是上一条回显给的数据。这个问题是由于我们的树形控件没有重新渲染导致的。比较笨的方法是每次编辑的时候重新加载一遍树形控件然后再进行回显选中的数据。不过这样...
  • Tree 树形控件 简介 Tree树形有很好层级展示效果,如公司和部门之间的层级关系 Element官方的代码: <el-tree :data="data" : props="defaultProps" @node-click="handleNodeClick" ></el-tree> ...
  • 1、temple中的代码 <el-tree ref="tree" node-key="id" :data="data2" show-checkbox :props="defaultProps" @check-change="checkChange" ...data树形结构的数据 show-checkbox 显示复选框 ref 可以this.
  • Input 为受控组件,它总会显示 Vue 绑定值。 通常情况下,应当处理input事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变。 <el-input v-model="keyWord" :clear-icon-...
  • vue树形控件

    千次阅读 2019-03-25 10:11:35
    初步树形图片html<div class="tree_box " > <div v-for="(item,index) in tree_arr"> <div class="tree_parent row_flex al_flex "> &...
  • vue 树形菜单事件 右击自定义菜单

    千次阅读 2019-05-03 20:14:06
    效果图: 精髓代码: 父组件: 树形结构加自定义菜单 <div class="treesclass"> <my-tree :data="theData" :name="menuName" ...
  • vue自定义tree组件

    2022-04-12 10:54:33
    vue自定义Tree

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,123
精华内容 449
关键字:

自定义vue树形控件

友情链接: Socks_Dll.rar