el-tree设置结构线和图标

<template>
  <div>
    <div class="flexStyle">
      <el-form
        :inline="true"
        size="small"
        style="height: 45px;padding-top: 8px"
      >
        <el-form-item label="产品型号">
          <el-select
            v-model="searchForm.productName"
            clearable
            filterable
            @change="getDropProVersion"
          >
            <el-option
              v-for="item,index in productNameOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品版本">
          <el-select
            v-model="searchForm.version"
            clearable
            filterable
          >
            <el-option
              v-for="item,index in versionOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文件名称">
          <el-select
            v-model="searchForm.taskName"
            clearable
            filterable
            multiple
            collapse-tags
            style="width:350px"
          >
            <el-option
              v-for="item,index in taskNameOptions"
              :key="index"
              :label="item.label"
              :value="item.prop"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="searchClick"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div
      class="tree-container"
      style="margin-top: 10px"
    >
      <div class="left">
        <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          @node-click="handleNodeClick"
          @check-change="handleCheck"
          default-expand-all
          ref="tree"
        >
        </el-tree>
      </div>
      <div class="right">
        <el-table
          :data="tableData"
          style="width: 100%;position: fixed;top: 160px;"
          max-height="650"
        >
          <el-table-column
            fixed
            prop="label"
            label="城市"
            width="160"
          >
          </el-table-column>
          <el-table-column
            fixed
            prop="id"
            label="id"
            width="160"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="100"
          >
            <template slot-scope="scope">
              <i
                @click="deleteRow(scope.$index, tableData,scope.row.id)"
                class="tablei el-icon-delete"
              >
              </i>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

</template>
<script>
export default {
  data () {
    return {
      tableData: [],
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      searchForm: {
        productName: '',
        version: '',
        taskName: [],
        testObjective: ''
      },
      productNameOptions: [],
      versionOptions: [],
      taskNameOptions: [],
      colSelected: [],
      tableInfo: {
        headers: [],
        dataList: [],
        dataLoading: false,
        totalCount: 0,
        pageIndex: 1,
        pageSize: 15
      }
    }
  },
  watch: {
    'searchForm.version': {
      handler (newVal) {
        this.searchForm.taskName = ''
        this.getDropFileName()
      },
      immediate: true
    }
  },
  activated () {
    this.getDropProductAndTask()
    this.getDropProVersion()
    this.getDropFileName()
    this.getTreeList()
  },
  methods: {
    handleNodeClick (data) {
      console.log(data)
    },
    // 复选框点击事件
    handleCheck (data, change) {
      let nodes = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes())
      let filterNodes = nodes.filter(node => { // 过滤出子节点，也就是不含childred字段的节点数据
        return node.children === undefined
      })
      this.tableData = filterNodes// 赋值给表格数据
    },
    // 删除按钮
    deleteRow (index, rows, id) {
      this.$refs.tree.setChecked(id, false)// 取消左侧复选框的选中状态
      rows.splice(index, 1)// 从tableData中删除数据
    },
    // 复选框默认选中状态,应在请求数据处调用
    // 现在用的是本地数据，如果导入的是请求后的来的数据，并且有返回是否选中的字段，可以将已选中的那些数据的id遍历出来一个数组，类似于[1,2,3],然后放到下方；
    selection (arrDa) {
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys([], true)// 默认选中状态
      })
    },
    getTreeList () {
      this.$http({
        url: this.$http.adornUrl('/api/camera/getAnaReportTree'),
        method: 'post',
        data: this.$http.adornData({
          parseFile: this.parseFile,
          fileIds: this.searchForm.taskName === '' ? null : this.searchForm.taskName,
          productName: this.searchForm.productName,
          productVersion: this.searchForm.version
        })
      }).then(({ data }) => {
        if (data && data.code === 200) {
          this.data = data.data
        } else {
          this.$message.warning(data.message)
        }
      })
    },
    searchClick () {
      this.tableInfo.pageNum = 1
      this.parseFile = this.$route.query.parseFile ? this.parseFile : null
      this.getTreeList()
    },
    getDropProductAndTask () {
      this.$http({
        url: this.$http.adornUrl('/api/camera/dropProductAndTask'),
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 200) {
          this.productNameOptions = data.data.productName
        } else {
          this.$message.warning(data.message)
        }
      })
    },
    getDropProVersion () {
      this.$http({
        url: this.$http.adornUrl('/api/camera/dropProVersion?productName=' + this.searchForm.productName),
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 200) {
          this.versionOptions = data.data
        } else {
          this.$message.warning(data.message)
        }
      })
    },
    getDropFileName () {
      this.$http({
        url: this.$http.adornUrl('/api/camera/dropFileName'),
        method: 'post',
        data: this.$http.adornData({
          productName: this.searchForm.productName,
          productVersion: this.searchForm.version
        })
      }).then(({ data }) => {
        if (data && data.code === 200) {
          this.taskNameOptions = data.data
          if (data.data[0]) {
            this.searchForm.taskName = [data.data[0].prop]
          }
        } else {
          this.$message.warning(data.message)
        }
      })
    }
  }
}
</script>
<style scoped>
.tree-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

  /* 子节点旋转 */
  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* 有子节点 且未展开 */
  .el-tree .el-icon-caret-right:before {
    background: url("../../../assets/img/close.png") no-repeat 0 3px;
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    font-size: 16px;
    background-size: 16px;
  }

  /* 有子节点 且已展开 */
  .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    background: url("../../../assets/img/open.png") no-repeat 0 3px;
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    font-size: 16px;
    background-size: 16px;
  }
  /* 设置树形组件节点的定位和左内边距 */
  .el-tree-node {
    position: relative;
    padding-left: 13px;
  }
  /* 设置树形组件节点的 before 伪类的样式 */
  .el-tree-node:before {
    width: 1px;
    height: 100%;
    content: "";
    position: absolute;
    top: -38px;
    bottom: 0;
    left: 0;
    right: auto;
    border-width: 1px;
    border-left: 1px solid #b8b9bb;
  }
  /*设置树形组件节点的 after 伪类的样式 */
  .el-tree-node:after {
    width: 13px;
    height: 13px;
    content: "";
    position: absolute;
    left: 0;
    right: auto;
    top: 12px;
    bottom: auto;
    border-width: 1px;
    border-top: 1px solid #b8b9bb;
  }
  /* 设置树形组件首节点的左边框不显示 */
  .el-tree > .el-tree-node:before {
    border-left: none;
  }
  /* 设置树形组件首节点的顶部边框不显示 */
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  /* 设置树形组件末节点的 before 伪类的高度 */
  .el-tree .el-tree-node:last-child:before {
    height: 50px;
  }
  /*  设置树形组件节点字体大小、以及取消左内边距 */
  .el-tree .el-tree-node__content {
    color: #000;
    font-size: 14px;
    padding-left: 0 !important;
  }
  /* 设置树形组件孩子节点左内边距 */
  .el-tree .el-tree-node__children {
    padding-left: 11.5px;
  }
  /*  设置树形组件复选框左右外边距 */
  .el-tree .el-tree-node__content > label.el-checkbox {
    margin: 0 5px 0 5px !important;
  }
  /* 设置树形组件叶子节点的默认图标不显示 */
  .el-tree .el-tree-node__expand-icon.is-leaf {
    display: none;
  }

  /*  设置树形组件叶子节点的横线 */
  .el-tree .leaf-node-line {
    width: 23px;
    height: 13px;
    content: "";
    position: absolute;
    left: 13px;
    right: auto;
    top: 12px;
    bottom: auto;
    border-width: 1px;
    border-top: 1px solid #b8b9bb;
  }

  /* 设置树形组件有叶子节点的左外边距 */
  .el-tree .el-tree-node__content:has(.is-leaf) {
    /* color: aqua; */
    margin-left: 24px !important;
  }
  /* 设置树形组件展开图标定位、图层、内边距 */
  .el-tree .el-tree-node__expand-icon {
    position: relative;
    z-index: 99;
  }
}
.left {
  flex: 0 0 200px;
}
.right {
  flex: 1;
}
</style>