精华内容
下载资源
问答
  • vue+ElementUI自定义tree树形控件小图标

    千次阅读 2019-05-31 16:53:39
    Element-ui自带的图标库还是不够全,还是需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下 教程: ...登录>图标管理>我的项目 ...2.进入到我的项目里(第一次进可以新建项目) ...

    Element-ui自带的图标库还是不够全,还是需要引入第三方icon,自己在用的时候一直有些问题,参考了些教程,详细地记录补充下

    教程:

    1.进入iconfont http://www.iconfont.cn/   注册 >登录>图标管理>我的项目

    2.进入到我的项目里(第一次进可以新建项目)

     新建项目:

    项目名称随便写。前缀注意,不要跟element-ui自带的icon(前缀为:el-icon)重名了。

    设置完,点新建

     

    3. 现在我们返回阿里icon首页,点进去你想要的icon库

          3.1 搜索需要的小图标,点击添加到购物车

                

          3.2 进入购物车,将选择好的小图标添加至项目

               

    4 . 进入到我的项目中,点击下载至本地

    5.解压

    6.在src/assets下创建一个icon文件夹放入解压后选择的文件

    7.在main.js里边把css引进来

    8.项目中使用

     

    展开全文
  • 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了

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

    展开全文
  • 项目需求 首先返回的数据里 一定要有这个属性 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代表是否选中 用到啥就写啥
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 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>
    
    展开全文
  • https://gitee.com/xuliangzhan_admin/vxe-table一个基于 vue 的表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、贼灵活的配置项、...
  • VUE饿了么树形控件添加增删改功能

    千次阅读 2017-10-16 01:51:05
    element-ui树形控件:地址 在原文档中有个案例是有新增和删除功能,但是后来发现其修改的数据并不能直接影响到树形数据,所以采用了 render-content 的API重新写了个组件。写个开发的步骤,所以文章比较长emmm 2018...
  • 在项目中用到菜单项编辑删除,在 element-ui自定义节点内容时, 有说明:使用render-content指定渲染函数, 得环境支持 JSX 语法,只要正确地配置了相关依赖,就可以正常运行。 一,下面安装依赖: cnpm ...
  • 记录几款vue的Tree树形控件

    万次阅读 2019-07-05 16:25:30
    一:Vue Beauty url:https://fe-driver.github.io/vue-beauty/#/components/tree 特色:找了很多个框架,只有Vue Beauty是带连接线的,刚好项目能用上。...特点:有比较多的可自定义的地方,这个很好。 ...
  • Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改 最近在搞erp项目对应后台的管理功能,为了加速开发使用了 vue-element-admin 开发,使用的是elementUi框架,在项目中使用element的树形控件...
  • vue有关的Tree树形控件

    2020-04-26 18:51:20
    一:Vue Beauty url:https://fe-driver.github.io/vue-beauty/#/components/tree 特色:找了很多个框架,只有Vue Beauty是带连接线的,刚好项目能用上。...特点:有比较多的可自定义的地方,这个很好。 三:E...
  • Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改 最近在搞erp项目对应后台的管理功能,为了加速开发使用了 vue-element-admin 开发,使用的是elementUi框架,在项目中使用element的树形控件...
  • vue-cli项目树形控件:一级节点为本地节点,默认展开一级节点,增删改后局部刷新数据。同级拖拽。
  • 需求: vue-cli项目树形控件:一级节点为本地节点,默认展开一级节点,增删改后局部刷新数据。 增加节点,点击确定后局部刷新,渲染新数据。 源码 element组件样式 <el-tree class="treeitems" :data="data...
  • 1:zTree 是一个依靠 jQuery 实现的多功能 “插件”, 而且拥有较好的浏览器兼容性,有着丰富的功能以及可以自定义样式,足以满足大部分业务的开发。 第一步先导入css及js文件 css是在main.js内做了全局的引入。 ...
  • Tree(树形控件),Collapse(折叠面板)看起来比较符合意思深入查看Table相关范例,发现有个通过给columns数据设置一项,指定type: 'expand',即可开启扩展功能 可以考虑但也只是展开详细内容,如需树形结构,则需要...
  • 直接进入今天的正题,前提是node.js的环境还有vue及elment-ui都已经安装。由于element-ui的官方文档中介绍比较粗略,试了许久才成功,因此将其记录。(PS:属性控件的另一个开源插件库有Z-tree,功能较为丰富) 首先...
  • 直接进入今天的正题,前提是node.js的环境还有vue及elment-ui都已经安装了。 element-ui的官方文档中介绍比较粗略,试了许久才成功,因此将其记录。 首先看到自定义节点内容部分,指明了可以在节点区添加按钮或...
  • 做项目的时候要使用到一个自定义树形控件来构建表格树,在github上搜了一下没有搜索到合适的(好看的)可以直接用的,查看Element的组件说明时发现它的Tree控件可以使用render来自定义节点样式,于是基于它封装了...
  • 做项目的时候要使用到一个自定义树形控件来构建表格树,在github上搜了一下没有搜索到合适的(好看的)可以直接用的,查看Element的组件说明时发现它的Tree控件可以使用render来自定义节点样式,于是基于它封装了...
  • element-UI tree树形控件 修改小三角图标

    千次阅读 多人点赞 2020-05-13 17:54:19
    更改成自定义样式 因为是vue的 <style scoped>内写CSS 样式,所以需要添加 /deep/ 进行穿透 .el-tree /deep/ .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: ...
  • 将 [el-table-column] 的各项内容放在一个数组中,这个数组也是用来生成 [Tree 树形控件] 的控件,在实际的Table 中有些项可能会用到 template,所以在该数组中标识出来,我们需要的 [Tree 树形控件] 控件是没有...
  • 一、Tree 树形控件 问题: ...树形控件在参照官方最后一个自定义render例子时,无法对树节点进行选中 return h( "span", { style: { display: "inline-block", cursor: "pointer", ...
  • Vue.js(十) element-ui PC端组件库

    千次阅读 2019-01-17 21:20:56
    另一部分组件库是原生HTML标签元素没有的,是一些比较常用的独立的功能(如:分页、进度条、加载中、树形控件等),将这些独立的常用的功能封装成一个新的组件库(自定义标签元素)。 Element UI: 基于Vue PC端的UI框架...
  • 树形控件使用了组件递归的思想,所以只要递归了一层之后就不是严格的父子关系了,所以 $emit 方法是不合适的。 $emit使用的一些条件: 1.组件之间是严格的父子关系。 2.自定义的事件名必须全为小写。 因为是树形结构...

空空如也

空空如也

1 2
收藏数 38
精华内容 15
关键字:

自定义vue树形控件

vue 订阅