el-tree 选中取消 回显

image.png

  1. <el-input placeholder="输入关键字进行过滤"
    v-model="filterText"
    @input='filterTextchange'
    style='margin-bottom: 20px;'>
    </el-input>
    <el-tree class="filter-tree"
    :data="ruleForm.rangeType==10?unionList:industryCategory"
    accordion
    node-key="id"
    show-checkbox
    default-expand-all
    :default-checked-keys="treekeydata"
    :props="defaultProps"
    @check="handleCheckChange"
    :filter-node-method="filterNode"
    ref="tree">
    </el-tree>
    2 . treekeydata Array tree选中的key
    treedata1 Array 右边tree的数据

  2. 选中节点事件
    handleCheckChange (data, checked) {
    let keyFalg = this.treedata1.findIndex(item => item.code == data.code)
    if (keyFalg == -1) {
    this.set(data, 'isCheck', true) this.treedata1.push(data) } else { this.treedata1.splice(keyFalg, 1) this.treekeydata = this.treedata1.map(item => item.id) console.log(this.treekeydata); } this.treekeydata = this.refs.tree.getCheckedKeys(true)
    this.treekeydata = this.treedata1.map(item => item.id)

    },
    //右边删除事件
    handleClose (data) {
    this.treedata1.splice(this.treekeydata.indexOf(data.id), 1)
    this.treekeydata.splice(this.treekeydata.indexOf(data.id), 1)

    this.$refs.tree.setCheckedKeys(this.treekeydata)
    },

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容