iview - tree节点的相关操作

最新推荐文章于 2022-05-07 23:23:23 发布
最新推荐文章于 2022-05-07 23:23:23 发布
阅读量1.3k 收藏
点赞数
分类专栏： 效果实现 vue 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43972213/article/details/121233650
版权

最新有一个新的需求，即在iview tree的自定义节点基础上，对当前节点进行相关的操作，参考相关博客，整理了以下两种方案。

在这里插入图片描述
实现细节：

<template>
  <div>
    <Tree
      :data="kindData"
      :render="renderContent"
    ></Tree>
    <Button
      type="primary"
      @click="submit"
    >提交</Button>
  </div>

</template>
<script>
import $ from 'jquery/dist/jquery'

export default {
  data () {
    return {
      editState: false,
      // 输入框要修改的内容
      inputContent: '',
      // 修改前的TreeNode名称
      oldName: '',
      kindData: [
        {
          "expand": true,
          "title": "父节点1",
          "id": null,
          "code": "01",
          "parentCode": "0",
          "children": [
            {
              "tr_parentCode": "01",
              "tr_userid": null,
              "tr_name": "11",
              "count": "0",
              "tr_code": "0101",
              "tr_count": 15,
              "title": "子节点1",
              "id": null,
              "code": "0101",
              "parentCode": "01",
              "nodeKey": 1
            }
          ],
          "nodeKey": 0
        },
        {
          "expand": true,
          "title": "父节点2",
          "id": null,
          "code": "02",
          "parentCode": "0",
          "children": [
            {
              "tr_parentCode": "02",
              "tr_userid": null,
              "tr_name": "子节点2-1",
              "count": "0",
              "tr_code": "0202",
              "tr_count": 0,
              "title": "子节点2-1",
              "id": null,
              "code": "0202",
              "parentCode": "02",
              "nodeKey": 3
            },
            {
              "tr_parentCode": "02",
              "tr_userid": null,
              "tr_name": "子节点2-2",
              "count": "0",
              "tr_code": "0203",
              "tr_count": 0,
              "title": "子节点2-2",
              "id": null,
              "code": "0203",
              "parentCode": "02",
              "nodeKey": 4
            }
          ],
          "nodeKey": 2
        },
        {
          "expand": true,
          "title": "父节点3",
          "id": null,
          "code": "07",
          "parentCode": "0",
          "children": [
            {
              "tr_parentCode": "07",
              "tr_userid": null,
              "tr_name": "子节点3-1",
              "count": "0",
              "tr_code": "0700",
              "tr_count": 23,
              "title": "子节点3-1",
              "id": null,
              "code": "0700",
              "parentCode": "07",
              "nodeKey": 49
            }
          ],
          "nodeKey": 48
        },
        {
          "expand": true,
          "title": "父节点4",
          "id": "1377",
          "code": "48f84f52884845b999bcf4f3d5978a39",
          "parentCode": "0",
          "children": [],
          "nodeKey": 55
        }
      ]
    }
  },
  methods: {
    // 生成唯一id
    uuid () {
      var s = []
      var hexDigits = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
      for (var i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
      }
      s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = '-'

      var uuid = s.join('')
      return uuid
    },
    renderContent (h, { root, node, data }) {
      return h(
        'span',
        {
          class: 'myMenu',
          domProps: {
            id: data.code,
          },
          style: {
            display: 'inline-block',
            width: '100%',
          },
          on: {
            click: ($event) => {
              $event.stopPropagation()
            },
          },
        },
        [
          h('span', [
            h('Icon', {
              props: { // data.children 属性存在，则证明是父节点
                type: data.children ? 'ios-folder-open' : 'md-document'
              },
              style: {
                marginRight: '8px',
                marginTop: '-3px',
                color: data.children ? '#ffcc00' : '',
                fontSize: '18px',
              },
            }),

            //开始
            h(
              'Dropdown',
              {
                props: {
                  transfer: true,
                  trigger: 'contextMenu',
                  placement: 'bottom',
                },
                nativeOn: {
                  mousedown: ($event) => {
                    $event.stopPropagation()
                    if ($event.button === 2) {//$event.button === 0鼠标左键    $event.button === 2鼠标右键  $event.button === 1鼠标滚轮
                      //引入jquery  连续点击右键出下拉菜单，将上一个下拉菜单隐藏
                      var dropdownMenuId = "dropdown" + $($event.target).attr("id").substring(5);
                      $("#" + dropdownMenuId).css("display", "block");
                      $("#" + dropdownMenuId).parent(".ivu-select-dropdown").siblings(".ivu-select-dropdown").children(".ivu-dropdown-menu").css("display", "none");
                    }
                  },
                },
              },
              [
                h(`${data.editState ? '' : 'span'}`,{
                    domProps: { // 子组件的dom属性
                      id: 'title' + data.code,
                    },
                  }, data.title),
                h(`${data.editState ? 'input' : ''}`,
                 {
                  attrs: {
                    value: `${data.editState ? data.title : ''}`,
                    autofocus: 'true',
                  },
                  domProps: {
                    id: 'title' + data.code,
                  },
                  style: {
                    width: '12rem',
                    cursor: 'auto',
                  },
                  on: {
                    change: (event) => {
                      this.inputContent = event.target.value
                    },
                  },
                }),
                h(
                  `${data.editState ? 'span' : ''}`,
                  {
                    style: {
                      marginLeft: '.5rem',
                    },
                  },
                  [
                    // 确认按钮
                    h('Button', {
                      props: Object.assign({}, this.buttonProps, {
                        icon: 'md-checkmark',
                      }),
                      style: {
                        // marginRight: '8px',
                        border: 0,
                        background: 'rgba(0,0,0,0)',
                        fontSize: '1.3rem',
                        outline: 'none',
                      },
                      on: {
                        click: (event) => {
                          this.confirmTheChange(data)
                        },
                      },
                    }),
                    // 取消按钮
                    h('Button', {
                      props: Object.assign({}, this.buttonProps, {
                        icon: 'md-close',
                      }),
                      style: {
                        border: '0',
                        background: 'rgba(0,0,0,0)',
                        fontSize: '1.3rem',
                        outline: 'none',
                      },
                      on: {
                        click: () => {
                          this.CancelChange(data)
                        },
                      },
                    }),
                  ]
                ),
                
                h(
                  'DropdownMenu',
                  {
                    slot: 'list',
                    style: {
                      display: 'block',
                    },
                    domProps: {
                      id: 'dropdown' + data.code,
                    },
                  },
                  [
                    h(
                      'DropdownItem',
                      {
                        style: {
                          fontSize: '14px !important',
                          color: '#333',
                          textAlign: 'center',
                          display: data.children ? 'block' : 'none',
                        },
                        nativeOn: {
                          click: ($event) => {
                            $event.stopPropagation()
                            this.addNode(root, node, data)
                          },
                        },
                      },
                      '添加同级目录'
                    ),
                    h(
                      'DropdownItem',
                      {
                        style: {
                          fontSize: '14px !important',
                          color: '#1081CE',
                          textAlign: 'center',
                        },
                        nativeOn: {
                          click: ($event) => {
                            $event.stopPropagation()
                            this.addChildNode(root, node, data)
                          },
                        },
                      },
                      '添加子节点'
                    ),
                    h(
                      'DropdownItem',
                      {
                        style: {
                          fontSize: '14px !important',
                          color: '#19BE6B',
                          textAlign: 'center',
                        },
                        nativeOn: {
                          click: ($event) => {
                            $event.stopPropagation()
                            this.editTree(data)
                          },
                        },
                      },
                      '修改'
                    ),
                    h(
                      'DropdownItem',
                      {
                        style: {
                          fontSize: '14px !important',
                          color: '#FF0000',
                          textAlign: 'center',
                        },
                        nativeOn: {
                          click: ($event) => {
                            $event.stopPropagation()
                            this.remove(root, node, data)
                          },
                        },
                      },
                      '删除'
                    ),
                  ]
                ),
              ]
            ),
            //结束
          ]),
        ]
      )
    },
    // 添加同级目录
    addNode (root, node, data) {
      const children = {
        expand: true,
        title: '新建父节点',
        id: '',
        code: this.uuid(),
        parentCode: '0',
        children: [],
        nodeKey: Number(Math.random()).toString().substr(3, length),
      }
      this.kindData.push(children)
    },
    // 添加子节点
    addChildNode (root, node, data) {
      data.expand = true
      const children = data.children || []
      children.push({
        title: '新建子节点',
        expand: true,
      })
      this.$set(data, 'children', children)
    },
    // Tree修改按钮
    editTree (data) {
      this.inputContent = data.title
      this.oldName = data.title
      this.setStates(data)
    },
    // 控制Tree当前状态函数
    setStates (data) {
      var editState = data.editState
      if (editState) {
        this.$set(data, 'editState', false)
      } else {
        this.$set(data, 'editState', true)
      }
    },
    // 确认修改树节点
    confirmTheChange (data) {
      if (!this.inputContent) {
        this.$Notice.warning({
          title: '当前输入有误',
        })
      } else {
        if (this.oldName !== this.inputContent) {
          this.$Modal.confirm({
            title: '提示',
            content: `您确定将  “${this.oldName}”  重命名为 “ ${this.inputContent} ” 吗？`,
            onOk: () => {
              data.title = this.inputContent
              this.$Message.info('修改成功')
            },
            onCancel: () => {
              this.$Message.info('取消')
            },
          })
          this.setStates(data)
        } else {
          this.setStates(data)
        }
      }
    },
    // 取消修改树节点
    CancelChange (data) {
      this.$Notice.info({
        title: '取消修改',
      })
      this.setStates(data)
    },
    // 删除按钮
    remove (root, node, data) {
      // 1. 删除 子节点
      // 2. 删除 父节点
      // el===node,这个node是否含有children参数，有的话，就是删除 fu节点，没有就是删除zi节点
      // 删除父节点的话 ，需要判断当前节点下所有的子节点.splice(index, node.childrem.length)
      if (node.children) {
        console.log("fujiedian")
        var curIndex = (this.kindData || []).findIndex((el) => el.code === data.code)
        this.kindData.splice(curIndex, 1)
        // 根据父节点的parent去找它下面的所有子节点
        // const child = root.find(el => el === node)
        // console.log(parentKey)
      } else {
        console.log("zijiedian")
        const parentKey = root.find(el => el === node).parent;
        const parent = root.find(el => el.nodeKey === parentKey).node;
        const index = parent.children.indexOf(data);
        console.log(parentKey)
        console.log(parent)
        console.log(index)
        parent.children.splice(index, 1);
        this.$Message.info('删除成功');
      }
    },
    submit () {
      console.log(this.kindData)
    }
  },
}
</script>

在这里插入图片描述

实现细节：

<template>
  <div class="IviewTree">
    <Tree :data="data5" :render="renderContent"></Tree>
  </div>
</template>
<script>
export default {
  data() {
    return {
      editState: false,
      data5: [
        {
          title: '父节点1',
          expand: true,
          render: (h, { root, node, data }) => {
            return h(
              'span',
              {
                style: {
                  display: 'inline-block',
                  width: '100%',
                },
              },
              [
                h('span', [
                  h('Icon', {
                    props: {
                      type: 'ios-folder',
                    },
                    style: {
                      marginRight: '8px',
                    },
                  }),
                  h('span', data.title),
                ]),
              ]
            )
          },
          children: [
            {
              title: '子节点1',
              expand: true,
              children: [
                {
                  title: '子节点1-1',
                  expand: true,
                },
                {
                  title: '子节点1-2',
                  expand: true,
                },
              ],
            },
          ],
        },
        {
          title: '父节点2',
          expand: true,
          render: (h, { root, node, data }) => {
            return h(
              'span',
              {
                style: {
                  display: 'inline-block',
                  width: '100%',
                },
              },
              [
                h('span', [
                  h('Icon', {
                    props: {
                      type: 'ios-folder',
                    },
                    style: {
                      marginRight: '8px',
                    },
                  }),
                  h('span', data.title),
                ]),
              ]
            )
          },
          children: [
            {
              title: '子节点2',
              expand: true,
              children: [
                {
                  title: '子节点2-1',
                  expand: true,
                },
                {
                  title: '子节点2-2',
                  expand: true,
                },
              ],
            },
          ],
        },
      ],
      buttonProps: {
        type: 'default',
        size: 'small',
      },
      // 输入框要修改的内容
      inputContent: '',
      // 修改前的TreeNode名称
      oldName: '',
    }
  },
  methods: {
    // 树渲染逻辑
    renderContent(h, { root, node, data }) {
      return h(
        'span',
        {
          class: 'hhhaha',
          style: {
            display: 'inline-block',
            lineHeight: '1.6rem',
            width: '100%',
            cursor: 'pointer',
          },
          on: {
            click: () => {
              // 点击Tree节点触发
              data.editState ? '' : this.handleClickTreeNode(data)
            },
          },
        },
        [
          h('span', [
            h('Icon', {
              props: {
                type: `${
                  data.children == undefined || data.children.length == 0
                    ? 'md-document'
                    : 'ios-folder'
                }`,
              },
              style: {
                marginRight: '8px',
              },
            }),
            h(`${data.editState ? '' : 'span'}`, data.title),
            h(`${data.editState ? 'input' : ''}`, {
              attrs: {
                value: `${data.editState ? data.title : ''}`,
                autofocus: 'true',
              },
              style: {
                width: '12rem',
                cursor: 'auto',
              },
              on: {
                change: (event) => {
                  this.inputContent = event.target.value
                },
              },
            }),
          ]),
          // 增删改按钮部分
          h(
            `${data.editState ? '' : 'span'}`,
            {
              class: 'btnNone',
              style: { marginLeft: '1rem' },
            },
            [
              //操作按钮部分
              // 编辑按钮
              h('Button', {
                props: Object.assign({}, this.buttonProps, {
                  icon: 'ios-brush-outline',
                }),
                style: {
                  marginRight: '8px',
                  borderRadius: '50%',
                  width: '1.5rem',
                  lineHeight: '0',
                  padding: '0',
                  height: '1.4rem',
                },
                on: {
                  click: () => {
                    this.editTree(data)
                  },
                },
              }),
              // 添加按钮
              h('Button', {
                props: Object.assign({}, this.buttonProps, {
                  icon: 'ios-add',
                }),
                style: {
                  marginRight: '8px',
                  borderRadius: '50%',
                  width: '1.5rem',
                  lineHeight: '0',
                  padding: '0',
                  height: '1.4rem',
                },
                on: {
                  click: () => {
                    this.append(data)
                  },
                },
              }),
              // 删除按钮
              h('Button', {
                props: Object.assign({}, this.buttonProps, {
                  icon: 'ios-remove',
                }),
                style: {
                  marginRight: '8px',
                  borderRadius: '50%',
                  width: '1.5rem',
                  padding: '0',
                  lineHeight: '0',
                  height: '1.4rem',
                },
                on: {
                  click: () => {
                    this.remove(root, node, data)
                  },
                },
              }),
            ]
          ),
          // 确认/取消修改部分
          h(
            `${data.editState ? 'span' : ''}`,
            {
              style: {
                marginLeft: '.5rem',
              },
            },
            [
              // 确认按钮
              h('Button', {
                props: Object.assign({}, this.buttonProps, {
                  icon: 'md-checkmark',
                }),
                style: {
                  // marginRight: '8px',
                  border: 0,
                  background: 'rgba(0,0,0,0)',
                  fontSize: '1.3rem',
                  outline: 'none',
                },
                on: {
                  click: (event) => {
                    this.confirmTheChange(data)
                  },
                },
              }),
              // 取消按钮
              h('Button', {
                props: Object.assign({}, this.buttonProps, {
                  icon: 'md-close',
                }),
                style: {
                  border: '0',
                  background: 'rgba(0,0,0,0)',
                  fontSize: '1.3rem',
                  outline: 'none',
                },
                on: {
                  click: () => {
                    this.CancelChange(data)
                  },
                },
              }),
            ]
          ),
        ]
      )
    },
    // 控制Tree当前状态函数
    setStates(data) {
      var editState = data.editState
      if (editState) {
        this.$set(data, 'editState', false)
      } else {
        this.$set(data, 'editState', true)
      }
    },
    // Tree修改按钮
    editTree(data) {
      event.stopPropagation()
      this.inputContent = data.title
      this.oldName = data.title
      this.setStates(data)
    },
    // 添加按钮
    append(data) {
      event.stopPropagation()
      const children = data.children || []
      children.push({
        title: '新建节点',
        expand: true,
      })
      this.$set(data, 'children', children)
    },
    // 删除按钮
    remove(root, node, data) {
      event.stopPropagation()
      this.$Modal.confirm({
        title: '提示',
        content: `您确定删除 “${data.title}” 吗？`,
        onOk: () => {
          const parentKey = root.find((el) => el === node).parent
          const parent = root.find((el) => el.nodeKey === parentKey).node
          const index = parent.children.indexOf(data)
          parent.children.splice(index, 1)
          this.$Message.info('删除成功')
        },
        onCancel: () => {
          this.$Message.info('取消')
        },
      })
    },
    // 确认修改树节点
    confirmTheChange(data) {
      if (!this.inputContent) {
        this.$Notice.warning({
          title: '当前输入有误',
        })
      } else {
        if (this.oldName !== this.inputContent) {
          this.$Modal.confirm({
            title: '提示',
            content: `您确定将  “${this.oldName}”  重命名为 “ ${this.inputContent} ” 吗？`,
            onOk: () => {
              data.title = this.inputContent
              this.$Message.info('修改成功')
            },
            onCancel: () => {
              this.$Message.info('取消')
            },
          })
          this.setStates(data)
        } else {
          this.setStates(data)
        }
      }
    },
    // 取消修改树节点
    CancelChange(data) {
      this.$Notice.info({
        title: '取消修改',
      })
      this.setStates(data)
    },
    // 点击Tree节点触发
    handleClickTreeNode(data) {
      console.log('当前点击》》' + data.title)
    },
  },
}
</script>

<style>
.IviewTree {
  width: 300px;
  text-align: left;
  margin: 0 auto;
}
.btnNone {
  display: none;
}
/* .hhhaha:hover{color:aqua} */
.hhhaha:hover .btnNone {
  display: inline-block;
}

.hhhaha:hover {
  font-weight: 600;
  color: #275cd4;
}
.ivu-tree ul li {
  list-style: none;
  /* margin: 8px 0; */
  padding: 0;
  white-space: nowrap;
  outline: none;
}
</style>
時間不夠以後
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于vue、iview实现tree组件可拖拽、双击编辑
09-23
tree组件可实现节点拖拽、双击编辑、右键操作等等
vue项目el-tree 懒加载实现增加、修改、删除及刷新当前子节点，render-content自定义样式
热门推荐
m0_38105640的博客
10-15 1万+
element-ui 中设计层级和动态加载节点的组件el-tree，对于前端来说，用的比较多，否则对于vue项目，要自己写render操作dom。当操作的树形结构层级比较多时，多用懒加载。例如实现如下功能，就是用el-tree实现的。 实现这个功能有几个问题 要解决： 1.改样式。官网提供的样式不能够满足开发的需要，尤其是对tree进行增删改的时候。所以需要用到render-content自定义样式。 2.加载问题。懒加载，如何插入数据。 3.增删改之后刷新问题。 前两个问题很好解决，最后一个
vue树可拖动拖动项目排序
08-10
vue树可拖动，拖动项目排序
iview树形结构拖拽实现
花落微凉梦清幽的博客
12-24 1720
组件： <template> <div class="tree-wrapper" :style="'height:' + (showQuery ? 'calc(100% - 35px)' : '')"> <div v-if="showQuery" class="tree-search-box"> <Input v-model="queryModel" placeholder="请输入"
基于iView和he-tree-vue的一个拖拽树形组件
12-16
树形组件：支持selected选中状态（单/多），checkbox选择框，拖拽功能，增、删、改功能，双击展开、箭头展开收起功能，全部展开、收起功能，自定义图标、按钮、辅助信息等。
iview 实现 tree
qq_34103387的博客
11-05 467
文档地址: http://v1.iviewui.com/components/tree 2.代码实现 show-checkbox:允许展示选择框 <Tree ref="tree" :data="permissions" show-checkbox></Tree> 实现: async getResource () { let res = JSON.parse(JSON.stringify(this.allResource)) ..
iview-select-tree:基于iview进行二次开发的级联树状选择组件，支持无限级，单选，多选，搜索，表单验证（注：使用前先约会iview，否则无法使用）
03-26
iview选择树基于iview进行二次开发的级联树状选择组件，支持无限级，单选，多选，搜索，表单验证（注：使用前先约会iview，否则无法使用）安装npm install iview - tree - select -- save♡ import selectTree from ...
修改iview-ui tree树结构默认的小三角形源码
06-06
修改iview-ui tree树结构前面得小三角。可以使用ui库自带的icon图标，也可以自己根据项目 需求添加背景图片。 并且包括点击当前的父级节点文字，展开/隐藏 子级菜单，同时背景高亮显示 下载后，直接npm install 就...
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
10-18
下面小编就为大家分享一篇解决Jstree 选中父节点时被禁用的子节点也会选中的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
iview树添加图标
10-31
iview树添加图标
iview 树形加工类
10-16
iview 树形加工类,后台查询list数据，前台加工成iview所需要的树形结构
可随意拖动(移动)节点的tree 控件树
02-04
在自定义的树中。可以实现节点的自由拖动，包含所有的源码和使用方法，适用于一些权限管理的项目。可将拖动后的节点顺序保存在数据库中.上传的为一个网站，只需在不低于Vs2005版本的开发环境上运行即可演示效果,.有意志请加QQ：190817570 以便作更多的技术交流
iview组件tree实现点击节点勾选复选框
lotte
07-08 2850
组件格式 <Tree :data="specialList" ref="tree" show-checkbox @on-select-change='selectChange'></Tree> 获取节点信息包含父节点半选/全选状态 this.$refs.tree.getCheckedAndIndeterminateNodes() 勾选节点出发函数selectChange selectChange(v){ let val=v[0]
iview中tree树形组件使用介绍(个人总结)
机敏的皮皮虾的博客
10-22 5730
iview中tree树形组件使用介绍 最近有用到tree,被官网简单的描述折磨得有点小难受，后小有所得，在此和大家分享，希望大佬们不吝指教。 先贴官方的代码,，简单看一下 <template> <Tree :data="data5" :render="renderContent" class="demo-tree-render"></Tree> </template> <script> export default { data() {
构造iview Tree结构
chouya8141的博客
04-14 397
工程目录和类结构： 1.Book.java 测试model，包含id和父id还有name。 package com.dlmu.sei; /** * * @author zhangtuo * @Date 2017/4/14 */ public class Book { ...
iview tree 实现单选功能、 iview tree 单选功能实现、iview tree 多选变单选、iview Tree树形控件、 iview tree趟坑指北！
H舞
08-27 6331
仅以此文 纪念我无声的三周年司龄 以及2019年8月 姿美堂709的封闭开发时光！！！ 每年的八月份都是我司封闭开发的 大（ku）好（bi）时光，今年封闭开发带着我的小团队用iview-admin2重新构建了app后台管理系统 期间产品需求有树形控件 - 单选 需求，旧后台用的zTree 自带此功能 无需多说，换成iview居然没有单选，只有多选 百度之~ 恩 要是一下就查到解决方案...
iView使用tree和回显
qq_34631220的博客
05-07 1598
<Tree :data="data" ref="tree" show-checkbox multiple></Tree> getCheckedNodes 获取被勾选的节点 getSelectedNodes 获取被选中的节点 getCheckedAndIndeterminateNodes 获取选中及半选节点 console.log(this.$refs.tree.getCheckedAndIndeterminateNodes()) ...
iview填坑之Tree树型组件
旋转 跳跃 然后 团灭
07-02 6280
<Tree ref="tree" :data="treeContents" :render="renderContent"></Tree> 1. 先来说说数据 iview的Tree组件的data数据是树结构的，例如下面代码所示： export default { data () { return { ...
iview 下拉tree单选
最新发布
07-28
通过tree的getCheckedNodes方法可以获取选中的节点数组，然后将这个数组传递给select的options绑定的数组，同时将选中的节点的key赋值给select绑定的值。这样就完成了从tree到select的数据绑定。\[3\] 你可以参考这...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值