xps-web-csat/src/components/ArtCatSelector/index.vue

<template>
  <el-select v-model="artCatId" placeholder="请选择" collapse-tags popper-class="artCatSelect" @change="selectChange">
    <el-option :key="artCatId" style="height: auto" :value="artCatId" :label="artCatTitleFilters(artCatId)">
      <el-tree ref="tree" :data="treedata" node-key="artCatId" highlight-current :props="defaultProps" @node-click="handleCheckChange" />
    </el-option>
  </el-select>
</template>
<script>
import { getArtCatByList } from '@/api/system/artCatApi'
import { packageTreeData } from '@/utils'
export default {
  name: 'ArtCatSelector',
  props: {
    value: {
      type: [Number, String],
      default: undefined
    }
  },
  data() {
    return {
      artCatId: undefined,
      artCatTitle: undefined,
      artCatList: [],
      treedata: [],
      defaultProps: {
        children: 'children',
        label: 'artCatTitle'
      }
    }
  },
  watch: {
    value(val) {
      this.artCatId = val
    },
    artCatId(val) {
      this.$emit('input', val)
    }
  },
  created() {
    this.initArtCatData()
  },
  mounted() {},
  methods: {
    // 文章分类
    initArtCatData() {
      getArtCatByList().then((resp) => {
        const { code, data, msg } = resp
        if (code === 200) {
          this.artCatList = data
          this.treedata = packageTreeData({
            data,
            id: 'artCatId'
          })
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    artCatTitleFilters(val) {
      if (!val) return ''
      const artCatItem = this.artCatList.filter((item) => item.artCatId === val)[0]
      if (!artCatItem.artCatTitle) return ''
      return artCatItem.artCatTitle
    },
    selectChange(e) {
      var arrNew = []
      var dataLength = this.mineStatusValue.length
      var eleng = e.length
      for (let i = 0; i < dataLength; i++) {
        for (let j = 0; j < eleng; j++) {
          if (e[j] === this.mineStatusValue[i].label) {
            arrNew.push(this.mineStatusValue[i])
          }
        }
      }
      this.$refs.tree.setCheckedNodes(arrNew)// 设置勾选的值
    },
    handleCheckChange(node) {
      this.artCatId = node.artCatId
      this.artCatTitle = node.artCatTitle
    }
  }
}
</script>
<style lang="scss">
.artCatSelect{
  .el-tree{
    color: #333;
    .el-tree-node.is-current > .el-tree-node__content,.el-tree-node__content:hover{
      background-color: inherit !important;
    }
    .el-tree-node.is-current > .el-tree-node__content{
      color: #333;
    }
  }
}
</style>