element ui tree 高亮默认显示，this.$nextTick(() => { this.$refs.tree.setCurrentKey(value);}

最新推荐文章于 2024-07-31 10:10:55 发布
最新推荐文章于 2024-07-31 10:10:55 发布
阅读量1w 收藏 2
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/beichen3997/article/details/84341106
版权 
 <!-- Unit.vue -->
<template>
  <div>
    <div class="container">
      <el-row :gutter="20">
        <!-- 左侧内容 -->
        <el-col :span="6">
          <el-card class="height">
            <!-- 单位组树 -->
            <el-row :span="24">
              <el-col>
                <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="stretchable">
                  <el-tab-pane label="内部单位" name="first"></el-tab-pane>
                  <el-tab-pane label="外部单位" name="second"></el-tab-pane>
                </el-tabs>
                <el-row class="btn" :span="24">
                  <el-col :span="8">
                    <el-button type="primary" @click="add">新增</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button plain :disabled="editDisabled" @click="edit">编辑</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button plain :disabled="editDisabled" @click="deletes">删除</el-button>
                  </el-col>
                </el-row>
                <!-- 单位组树列表 -->
                <el-tree ref="tree" :data="roleGroupData" :default-expanded-keys="keys" :default-checked-keys="key" @node-expand="changeNode" node-key="id" :props="defaultProps" @node-click="handleNodeClick" :highlight-current="highlight" accordion></el-tree>
                <!-- 新建单位弹框 -->
                <!-- 新建单位弹框 -->
                <el-dialog :title="title" :visible.sync="dialog.dialogFormVisible" :width="DIALOG.width" :id="fileId" :before-close="cancel">
                  <!-- 新增单位 -->
                  <el-form label-width="80px" :model="formLabelAlign" ref="formLabelAlign" :rules="addUnitRules">
                    <el-form-item label="单位名称" prop="unitName">
                      <el-input v-model.trim="formLabelAlign.unitName"></el-input>
                    </el-form-item>
                    <el-form-item label="单位编码" prop="unitCode">
                      <el-input v-model.trim="formLabelAlign.unitCode"></el-input>
                    </el-form-item>
                    <el-form-item label="单位属性" prop="type">
                      <el-input v-model="type" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="上级单位" prop="parentName">
                      <el-input v-model="formLabelAlign.parentName" disabled></el-input>
                    </el-form-item>
                    <el-form-item class="dialogConfirm">
                      <el-button type="primary" @click="save('formLabelAlign')">确认</el-button>
                      <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                  </el-form>
                </el-dialog>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <!-- 右侧内容 -->
        <el-col :span="18">
          <el-card class="height">
            <el-form :inline="true" :label-position="labelPosition" ref="searchForm" :model="searchForm" label-width="80px" class="topSearchForm" :rules="searchFormRule">
              <el-form-item label="用户姓名" prop="param.userFullname">
                <el-input v-model.trim="searchForm.param.userFullname" placeholder="请输入用户姓名"></el-input>
              </el-form-item>
              <el-form-item label="用户账号" prop="param.accountCode">
                <el-input v-model.trim="searchForm.param.accountCode" placeholder="请输入用户名/手机号码/邮箱地址" style="min-width:260px"></el-input>
              </el-form-item>
              <el-form-item label="" class="queryReset">
                <el-button type="primary" @click="toView('searchForm')">查询</el-button>
                <el-button @click="reset('searchForm')">重置</el-button>
              </el-form-item>
              <div class="clearfix"></div>
            </el-form>
            <div>
              <el-row class="btnGroup">
                <el-col :span="24">
                  <el-button type="primary" :disabled="addDisabledUser" @click="addList">新增</el-button>
                  <el-button @click="remove" :disabled="removeRole">删除</el-button>
                </el-col>
              </el-row>
              <!-- 单位列表 -->
              <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="userFullname" label="用户姓名">
                  <template slot-scope="scope">{{ scope.row.userFullname }}</template>
                </el-table-column>
                <el-table-column prop="unitName" label="所属单位">
                  <template slot-scope="scope">{{ scope.row.units[0].unit.unitName }}</template>
                </el-table-column>
                <el-table-column prop="userName" label="用户名">
                  <template slot-scope="scope">{{ scope.row.userName }}</template>
                </el-table-column>
                <el-table-column prop="userMobile" label="手机号码">
                  <template slot-scope="scope">{{ scope.row.userMobile | conceal }}</template>
                </el-table-column>
                <el-table-column prop="userEmail" label="邮箱地址">
                  <template slot-scope="scope">{{ scope.row.userEmail }}</template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
              <div class="page">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="PAGE_CONFIG.pageNum" :page-sizes="PAGE_CONFIG.sizes" :page-size="PAGE_CONFIG.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="PAGE_CONFIG.total" v-if="PAGE_CONFIG.total>0"></el-pagination>
              </div>
              <!-- 新增关联 -->
              <AddcontentVue ref="addContent" :dialogFormContent="dialog.dialogFormContent" :unitType="unitType" @updataContent="changeContent" @updataTable="changeTablie" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import '@/assets/styles/identity.styl'
import { IDENTITY_CLIENT, PAGE_CONFIG, DIALOG } from '@/utils/identity/constants'
// import { getErrorMessage } from '@/utils/i18n'
import { Message } from 'element-ui'
import { getMessagesFromError } from '@/utils/i18n'
import AddcontentVue from './components/AddContent'
import gql from 'graphql-tag'
export default {
  components: {
    AddcontentVue
  },

  filters: {
    // 隐藏手机号中间四位
    conceal: function (value) {
      if (value) {
        return (value = value.substr(0, 3) + '****' + value.substr(7))
      } else {
        return (value = '')
      }
    }
  },
  // props: {},

  data () {
    return {
      fileId: this.id || 'vue-filesone-' + +new Date() + +Math.random(),
      PAGE_CONFIG,
      DIALOG,
      activeName: 'first',
      unitType: '2',
      parentName: '',
      groupData: [],
      stretchable: true,
      getCurrentItem: {},
      editDisabled: true,
      // addDisabledUser: true,
      // 左侧属性单位列表
      roleGroupData: [],
      defaultProps: {
        children: 'children',
        label: 'unitName'
      },
      tabPosition: 'top',
      labelPosition: 'left',
      multipleSelection: [],
      // 编辑，新增必填
      addUnitRules: {
        unitName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        unitCode: [{ required: true, message: '请选择编码', trigger: 'blur' }]
      },
      // 左侧新增，编辑单位表单
      formLabelAlign: {
        id: '',
        unitName: '',
        unitCode: '',
        parentId: '',
        parentName: '组织机构'
      },
      // 弹出框标题
      title: '',
      // 右侧查询单位下单位列表
      searchForm: {
        pageNum: PAGE_CONFIG.pageNum,
        pageSize: PAGE_CONFIG.pageSize,
        param: {
          unitId: '',
          userType: '2',
          accountCode: '',
          userFullname: ''
        }
      },
      searchFormRule: {},
      // 右侧单位数组
      tableData: [],
      // 弹框关闭删除
      dialog: {
        dialogFormVisible: false,
        dialogFormContent: false
      },
      keys: [],
      key: [],
      highlight: true,
      nodeKey: ''
    }
  },
  computed: {
    // 多选删除是否能用
    removeRole () {
      return this.multipleSelection.length === 0
    },
    // 判断单位属性
    type () {
      return this.activeName === 'second' ? '外部单位' : '内部单位'
    },
    addDisabledUser () {
      return !this.getCurrentItem.children || (this.getCurrentItem.children.length > 0)
    }
  },

  // created () {},

  mounted () {
    this.getUnitList(this.unitType)
  },

  methods: {
    addList () {
      this.dialog.dialogFormContent = true
      this.$refs.addContent.searchUserList()
    },
    //  获取单位列表
    searchUserList () {
      this.$apollo
        .query({
          query: gql`
            query users ($unitUserInput:UnitUserInput, $pageInput:PageInput) {
              users (unitUserInput:$unitUserInput, pageInput:$pageInput) {
                total
                list {
                  id
                  userSex
                  userName
                  userFullname
                  userMobile
                  userEmail
                  units {
                    unit {
                      unitName
                    }
                  }
                }
              }
            }
          `,
          fetchPolicy: 'network-only',
          variables: {
            unitUserInput: {
              userFullname: this.searchForm.param.userFullname,
              accountCode: this.searchForm.param.accountCode,
              userType: this.searchForm.param.userType,
              unitId: this.searchForm.param.unitId
            },
            pageInput: {
              pageNum: this.searchForm.pageNum,
              pageSize: this.searchForm.pageSize
            }
          },
          client: IDENTITY_CLIENT
        })
        .then(res => {
          if (res.data.users) {
            this.tableData = JSON.parse(JSON.stringify(res.data.users.list))
            this.PAGE_CONFIG.total = res.data.users.total
          }
        })
        .catch(err => {
          Message.error(getMessagesFromError(err).join(';'))
        })
    },
    // 点击切换内部用户外部用户
    handleClick (tab, event) {
      // 1代表外部,2代表内部
      // this.addDisabledUser = true
      this.getCurrentItem = {}
      if (tab.name === 'first') {
        this.unitType = '2'
        this.getUnitList(this.unitType)
      } else {
        this.unitType = '1'
        this.getUnitList(this.unitType)
      }
      this.searchForm.param.userType = this.unitType
    },
    // 根据type查询内部机构单位
    getUnitList (type) {
      this.$apollo
        .query({
          query: gql`
            query units ($unitType:String){
              units (unitType: $unitType) {
                id
                parentId
                unitName
                unitCode
                children {
                  id
                  parentId
                  unitName
                  unitCode
                  children {
                    id
                    parentId
                    unitName
                    unitCode
                    children {
                      id
                      parentId
                      unitName
                      unitCode
                      children {
                        id
                        parentId
                        unitName
                        unitCode
                      }
                    }
                  }
                }
              }
            }`,
          fetchPolicy: 'network-only',
          variables: {
            unitType: type
          },
          client: IDENTITY_CLIENT
        }).then(res => {
          if (res.data.units.length) {
            let form = {}
            this.$set(form, 'unitName', '组织机构')
            this.$set(form, 'children', JSON.parse(JSON.stringify(res.data.units)))
            this.roleGroupData = []
            this.roleGroupData.push(form)
            // 暂时保留
            // this.$store.commit('SET_ID', this.roleGroupData[0].id)
            this.$store.commit('SET_ID', this.roleGroupData[0].children[0].id)
            this.keys = []
            this.keys.push(this.roleGroupData[0].children[0].id)
            this.key = []
            this.key.push(this.roleGroupData[0].children[0].id)
            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(this.roleGroupData[0].children[0].id)
            })
            this.searchForm.param.unitId = this.roleGroupData[0].children[0] ? this.roleGroupData[0].children[0].id : ''
            this.searchUserList()
            this.groupData = JSON.parse(JSON.stringify(res.data.units))
            this.groupData.push({ unitName: '组织机构', id: 'ae60506073b14983868c8b752914f027' })
            this.groupData.push({ unitName: '组织机构', id: '1c0acfadb4fa4939b3a25330589de332' })
          }
        }).catch(err => {
          Message.error(getMessagesFromError(err).join(';'))
        })
    },
    // 单位树点击事件
    handleNodeClick (data, node) {
      this.getCurrentItem = {}
      this.formLabelAlign.parentId = ''
      this.formLabelAlign.parentName = ''
      // 判断点击结构组织中是不是有id 不调用接口
      if (data.id) {
        if (data.parentId) {
          this.editDisabled = false
        } else {
          // 一级组织机构不可编辑，删除
          this.editDisabled = true
        }
        this.getCurrentItem = data
        this.searchForm.param.unitId = data.id
        this.$store.commit('SET_ID', data.id)
        this.searchUserList()
      }
    },
    // 获取单位下的用户列表
    // 关闭弹框事件
    closeDialogHandle () {
      this.dialog.dialogFormVisible = false
    },
    // 展开事件
    changeNode () {
    },
    // 数据库删除
    // 删除
    deleteUnit () {
      this.$apollo
        .mutate({
          mutation: gql`mutation deleteUnit ($id:ID!){
            deleteUnit (id: $id)
          }
          `,
          variables: {
            id: this.getCurrentItem.id
          },
          client: IDENTITY_CLIENT
        })
        .then(res => {
          if (res.data.deleteUnit) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getUnitList(this.unitType)
            this.editDisabled = true
            this.getCurrentItem = {}
          }
        })
        .catch(err => {
          Message.error(getMessagesFromError(err).join(';'))
        })
    },
    // 删除事件
    deletes () {
      if (this.getCurrentItem.hasOwnProperty('children')) {
        if (this.tableData.length === 0) {
          this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 一级 无二级
            this.roleGroupData = this.roleGroupData.filter(
              item => item.id !== this.getCurrentItem.id
            )
            this.deleteUnit()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
        } else {
          this.$message.error('该单位下有用户，不可删除')
        }
      } else {
        // 二级
        if (this.tableData.length === 0) {
          this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              // 一级 无二级
              this.deleteUnit()
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        } else {
          this.$message.error('该单位下有子单位，不可删除')
        }
      }
    },
    // 新增单位
    add () {
      this.dialog.dialogFormVisible = true
      this.title = '新增单位'
      this.formLabelAlign.id = ''
      this.formLabelAlign.unitName = ''
      this.formLabelAlign.unitCode = ''
      if (this.getCurrentItem.parentId) {
        this.formLabelAlign.parentId = this.getCurrentItem.id
        this.formLabelAlign.parentName = this.getCurrentItem.unitName
      } else {
        this.formLabelAlign.parentName = '组织机构'
      }
    },
    saveParentName (arr) {
      // var self = this
      arr.forEach(item => {
        if (item.id === this.getCurrentItem.parentId) {
          this.formLabelAlign.parentName = item.unitName
        } else {
          if (item.hasOwnProperty('children') && item.children.length !== 0) {
            this.saveParentName(item.children)
          }
        }
      })
    },
    // 编辑单位
    edit () {
      this.title = '编辑单位'
      this.dialog.dialogFormVisible = true
      this.formLabelAlign.id = this.getCurrentItem.id
      this.formLabelAlign.unitCode = this.getCurrentItem.unitCode
      this.formLabelAlign.unitName = this.getCurrentItem.unitName
      // fu 赋值parentId
      this.formLabelAlign.parentId = this.getCurrentItem.parentId
      if (this.getCurrentItem.parentId) {
        this.saveParentName(this.groupData)
      }
    },
    // 列表查询
    toView (searchForm) {
      this.$refs[searchForm].validate((valid) => {
        if (valid) {
          this.searchForm.pageNum = '1'
          this.searchForm.pageSize = '10'
          this.searchUserList()
        } else {
          return false
        }
      })
    },
    // 取消
    cancel () {
      this.dialog.dialogFormVisible = false
      this.$refs['formLabelAlign'].clearValidate()
    },
    // 重置
    reset (formData) {
      this.$refs[formData].resetFields()
      this.dialog.dialogFormVisible = false
    },
    // table多选
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 接收返回值
    changeContent () {
      this.dialog.dialogFormContent = false
    },
    changeTablie () {
      this.dialog.dialogFormContent = false
      this.searchUserList()
    },
    // 删除
    remove () {
      let arr = this.multipleSelection.map(value => {
        return value.id
      })
      this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$apollo
          .mutate({
            mutation: gql`mutation deleteUnitUser($unitId:ID, $userIds:[ID!]){
              deleteUnitUser(unitId: $unitId, userIds: $userIds)
            }`,
            variables: {
              unitId: this.searchForm.param.unitId,
              userIds: arr
            },
            client: IDENTITY_CLIENT
          })
          .then(res => {
            if (res.data.deleteUnitUser) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.multipleSelection = []
              this.searchUserList()
            }
          })
          .catch(err => {
            Message.error(getMessagesFromError(err).join(';'))
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 编辑新增单位提交事件
    save (ruleForm) {
      // console.log(this.formLabelAlign)
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          this.$apollo
            .mutate({
              mutation: gql`mutation saveUnit($id:ID, $unit:UnitInput){
                saveUnit (id:$id, unit:$unit) {
                  id
                }
              }`,
              variables: {
                id: this.formLabelAlign.id,
                unit: {
                  unitType: this.unitType,
                  parentId: this.formLabelAlign.parentId,
                  unitName: this.formLabelAlign.unitName,
                  unitCode: this.formLabelAlign.unitCode
                }
              },
              client: IDENTITY_CLIENT
            })
            .then(res => {
              if (this.formLabelAlign.id) {
                if (res.data.saveUnit.id) {
                  this.$message({
                    message: '更新成功',
                    type: 'success'
                  })
                } else {
                  this.$message.error('更新失败')
                }
              } else {
                if (res.data.saveUnit.id) {
                  this.$message({
                    message: '添加成功',
                    type: 'success'
                  })
                } else {
                  this.$message.error('添加失败')
                }
              }
              this.$refs[ruleForm].resetFields()
              this.dialog.dialogFormVisible = false
              this.getCurrentItem = {}
              this.editDisabled = true
              this.getUnitList(this.unitType)
            })
            .catch(err => {
              Message.error(getMessagesFromError(err).join(';'))
            })
        } else {
          return false
        }
      })
    },
    // 一页几条查询事件
    handleSizeChange (val) {
      this.searchForm.pageSize = val
      this.searchUserList()
    },
    // 第几页查询事件
    handleCurrentChange (val) {
      this.searchForm.pageNum = val
      this.searchUserList()
    }
  }
}

</script>
<style lang='stylus'  rel='stylesheet/stylus' scoped>
.btn
  margin-bottom 20px
  .listBtn
    float right
</style>

 

beichen3997
关注
专栏目录
Vue -- Element UI的Tree组件中，this.$refs.menuTree.setCurrentKey()设置当前被选中的树节点无效果？$nextTick
Emily
08-22 2万+
在项目中，在数据请求完后，获得allMenuData，然后通过 this.$refs.menuTree.setCurrentKey()设置当前被选中的树节点。但是发现并没有效果。 原因：DOM并未渲染完，也就是被选中的树节点还没渲染出来，所以对它操作是无效的。所以需要借助$nextTick，确保DOM已渲染。 $nextTick(function(){ }) //或者 $nextT...
【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree
Sabrina_cc的博客
12-03 1万+
本文主要讲解了基础Element-ui中el-tree组件的使用，包括对组织机构树的组件封装，使用组织机构树进行查询，以及使用vue-content-menu修改editableTree
element-tree 数据格式化以及默认展示节点
weixin_47303966的博客
12-06 666
this.$refs.tree.setCurrentKey(node-key的id) 展示默认选中节点为高亮 默认加载tree expanded(data){ if(data&&data.length>0){ let item =thie.handleExpanded(data); let currNm=item.id; setTimeout(()=>{ this.$refs.tree.setCurrentKey(currNm) },3000) }, han
ref和this.$refs
最新发布
qq676752351的博客
07-31 152
利用v-for和ref获取一组数据或dom节点，如果希望通过v-for遍历加不同的ref，需要使用冒号，即:ref （其他属性通常也是这样，加：说明后面的是一个变量或表达式，不加则为固定值，常量）this.$refs.myButton.style.backgroundColor = 'blue';ref加在子组件上，用this.$refs.ref值获取到的是组件实例，可以使用组件的所有方法，使用方法时则this.$refs.ref值.方法（）就可以使用了。2024.5.31日笔记。
element UI tree 指定节点选中 setCurrentKey
DLM1031653077的博客
05-10 6036
点击按钮节点高亮显示 代码 <!-- node-key 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 highlight-current 是否高亮选中节点默认false。 expand-on-click-node 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。 default-expanded-keys 默认展开的节点的 key 的数 default-expand-all 是...
element：el-tree控件获取当前选中节点（key）值，超简单！！
热门推荐
W
01-07 3万+
呜呜呜，我终于弄明白这个el-tree怎么用了，主要还是要仔细看官网，网上去查到的真的是太复杂了，都是在坑我 在对tree设置唯一标识key时，需要设置node-key属性： 看官网文档，这个click方法就是我想要的理想方法啊，直接给出选中的节点、节点key值等 结果： 简直不要太好用了，代码如下： 重要的事情再说一次： ！！ 设置key值必须要设置node-key <el-tree ref="tree" :data="RoleTreeData...
element树结构，默认选中当前，el-tree，setCurrentKey无效，不好使
weixin_41950674的博客
05-09 5504
设置node-id之外还需要设置高亮为真，设置current-node-key
【Vue3】【方案一】element-tree通过setCurrentKey来实现 点击按钮触发树的【选中】并【自动展开】的效果
清凌的博客
06-08 8769
目录：参考：方案一：`template`需要修改的地方：`参考： Vue – Element UI的Tree组件中，this.$refs.menuTree.setCurrentKey()设置当前被选中的树节点无效果 方案一： 我们希望点击按钮，点击后，树节点就自动被选中 template需要修改的地方： 需要设置一个引用组件的点：ref="tree"，使得后面的method里面的函数可以操控在template里面的dom元素 需要设置一个node-key，这个值需要独一无二，根据文档内容：
element-ui中getCheckedKeys和getCurrentKey获取不到值的问题可能是因为node-key设置的有问题
qq_43351249的博客
07-29 1万+
后端返回的数据唯一key值是orgId，通过props属性把id和orgId以及label和orgName对应上了，此时node-key绑定的是id，而是orgId <Tree ref="tree" :props="{id: 'orgId', label: 'orgName'}" :data="groupList" :filter-node-method="nodeFilter" :current-node-key="us
【element ui】问题集锦
Beam
03-29 2118
现象： 在el-dialog弹出框中使用到el-table列表时，右侧操作栏设置了fixed=“right”，第一次打开弹框正常，关闭后再次打开，发现操作栏全都往下移动了一行，导致表格行错位。 解决： 官方文档有提供方法doLayout，但没明确什么情况下使用，或许此时就能用。 监听data变化后，需要重新渲染el-table时，调用doLayout该方法即可。 代码： watch: { '$attrs.data': { handler (val) { this.$refs.com
Vue组件(一) - 二次封装ElementUI实现tree树形组件
HUMM
05-31 2070
文章目录功能描述代码base-tree.vue:treeDemo.vue: 功能描述 基础功能同el-tree 代码 base-tree.vue: <!-- * @Description: 公共树组件 * @Author: HMM * @Date: 2021-01-11 16:23:23 * @FilePath: base-tree.vue 变量： expandNode：是否展开所有节点 isShowFilter: 是否需要节点过滤 treeProps: 树形结构配置项 事件： @h
vue.js从入门到深入再到随心而用————vue电商项目005(分类管理模块、参数管理模块)
Belief的博客
05-12 855
基于element-ui完成的vue项目，这篇博客来说说分类管理和参数管理两个模块的完成。大家感兴趣可以进来看看哦，用了很多炫酷的组件，同时也收获了很多，会持续更新的哦！！！
elementUI 树形控件设置默认高亮
zhengyun1568的博客
07-16 1097
<el-tree ref="treeBox" :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[heightKey]" :props="defaultProps"> </el-tree> <script> export default { data() { return {
默认选中树形的子节点方法this.$refs.tree.se
每天多一点干货
07-29 283
首先排除专业相关工作，我专业学的不好，英语也没有四级，除了有一张硕士文凭啥也没有，投大公司被嫌弃没经验，投小公司被嫌弃学历高，考公考编考不上，真的只能进厂当流水。比如子节点id为7， 默认选中树形子节点 this.$refs.tree.setCurrentKey(7);诺瓦星云没收到笔试，是不是无了，还在初筛进行中。
vue+element：current-node-key和setCurrentKey设置默认选中并高亮节点，附带全部展开，全部关闭，重新渲染树结构函数render-content
Crazy_GirlLL的博客
02-25 2万+
根据接口获取树结构后，设置默认选中的节点，并高亮 效果图： 官网中对于这两个节点的解释如下 代码如下 <el-tree v-loading="loading" :data="treeData" node-key="value" :props="defaultProps" default-expand-all
element tree组件current-node-key 失效或者setCurrentKey失效问题解决方案
.伊泽瑞尔
03-30 1万+
element tree组件current-node-key 失效或者setCurrentKey失效问题解决方案， 将一维数组转化成tree能用的父子嵌套结构
this.$nextTick(() => { this.$refs.tree.setCurrentKey(this.removeId); });
03-22
这是 Vue.js 中的代码，用于在 DOM 更新后执行回调函数。具体来说，它会在下一次 DOM ...在这段代码中，this.$refs.tree.setCurrentKey(this.removeId) 会在 DOM 更新后被调用，将当前选中的树节点设置为 removeId。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值