el-tree 父组件数据双向绑定更新、on-check、check-change

最新推荐文章于 2024-09-04 17:01:46 发布

曾经沧海海

最新推荐文章于 2024-09-04 17:01:46 发布

阅读量1.4k

点赞数

分类专栏： vue 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/m0_37684037/article/details/123098114

版权

本文详细介绍了如何在Vue.js应用中使用Element UI的el-tree组件实现父组件数据的双向绑定，同时讲解了on-check和check-change事件的用法，帮助开发者更好地理解和操作tree组件的状态。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <div>
      <el-input
        placeholder="Search"
        size="small"
        v-model="filterText"
        clearable
        @keyup.enter.native="onSearch"
        @clear="onSearch"
      ></el-input>
      <el-tree
        ref="tree"
        show-checkbox
        node-key="key"
        :data="treeData"
        :default-checked-keys="defaultCheckedKeys"
        :default-expanded-keys="expandList"
        @check="onCheck"
        @check-change="checkChange"
        style="height:260px;overflowY:auto;padding-top:5px"
      >
        <span class="custom-tree-node" slot-scope="{ node }">
          <span style="margin-left:4px">{
  { highLight(node.label)[0] }}</span>
          <span style="color:red;margin:0 -4px 0 -4px">{
  { highLight(node.label)[1] }}</span>
          <span>{
  { highLight(node.label)[2] }}</span>
        </span>
      </el-tree>
      <div style="margin:12px 0 5px; font-weight:bold">已选择列表:</div>
      <div
        style="max-height:60px;min-height:40px;overflowY:auto;margin-bottom:-20px;border:1px solid #E6E6E6;border-radius: 3px"
      >
        <span>{
  {checkedDisplay}}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["treeDataOrigin", "tableData"],
  data () {
    return {
      filterText: '',
      searchName: '', // 回车渲染
      treeData: this.