el-tree树实践

1、弱关联+全选按钮 和强关联

    <el-dialog

      title="选择参与对象"

      v-model="orgVisible"

      :append-to-body="false"

      :before-close="closeDia"

    >

      <div class="main-container">

        <div class="left-container">

          <div class="selectList">

            <div

              class="selectItem"

              v-for="(item, index) in orgSelectList"

              :key="index"

            >

              <div class="item">

                <div class="name">{ { item.name }}</div>

                <div class="close" @click="delSelected(item)">

                  <i class="el-icon-close"></i>

                </div>

              </div>

            </div>

          </div>

        </div>

        <div class="right-container">

          <div class="selectAll">

            <el-checkbox v-model="selectAll" @change="selectAllHandle">全选</el-checkbox>

          </div>

          <div class="treeBox">

            <el-tree

              v-if="clearOrgData"

              ref="orgTree"

              lazy

              node-key="id"

              :props="orgTreeProps"

              :load="loadNode"

              show-checkbox

              :check-strictly="true"

              :default-checked-keys="orgCheckedKeys"

              @check="orgHandleNodeClick"

            ></el-tree>

          </div>

        </div>

      </div>

      <div class="dia-footer">

        <div class="btn cancel" @click="closeDia">取消</div>

        <div class="btn sure" @click="sureHandle">确定</div>

      </div>

    </el-dialo