横向树状+竖向树状

   <el-table-column type="expand" prop="data" label="" width="40">
          <template slot-scope="scope">
            <!--   一级-->
            <div v-if="scope.row.children.length > 0">
              <el-row :class="['bt_border', idx1 === 0 ? 'tp_border' : '']"
                      v-for="(item1, idx1) in scope.row.children"
                      :key="item1.id"
              >
                <el-col :span="6">
                  <el-tag
                      @close="delrole(scope.row, item1.id)"
                      closable
                  >{{ item1.authName }}
                  </el-tag>
                </el-col>
                <el-col :span="18">
                  <!-- 二级权限 -->
                  <el-row v-for="item2 in item1.children" :key="item2.id">
                    <el-col :span="6">
                      <el-tag
                          @close="delrole(scope.row, item2.id)"
                          closable
                          type="success"
                      >{{ item2.authName }}
                      </el-tag
                      >
                      <i class="el-icon-caret-right"></i>
                    </el-col>
                    <el-col :span="18">
                      <el-tag
                          closable
                          type="warning"
                          v-for="item3 in item2.children"
                          :key="item3.id"
                          @close="delrole(scope.row, item3.id)"
                      >
                        {{ item3.authName }}
                      </el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
            <div v-else>该角色暂无权限</div>
          </template>
        </el-table-column>

↓↓↓↓↓↓↓↓

<el-dialog title="分配权限" :visible.sync="Trees" @close="resetTree">
      <el-tree
          :data="data"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="path"
          :default-checked-keys="checkedKeysArr"
          :props="defaultProps"
      >
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Trees = false">取 消</el-button>
        <el-button type="primary" @click="setRightsToRole">确 定</el-button>
      </div>
    </el-dialog>

↓↓↓↓↓↓↓