关键词：vue；前端；treeselect

需求

就是选中部门名称后，会查找项目，选了项目之后，会找合同

引入treeselect

// 引入treeSelect组件和style
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {STATUS} from "common/src/constant/constants";

  components: {
    Treeselect, // 在组件中添加treeSelect
  },

<style>
.vue-treeselect{
  height: 30px;
}
</style>

代码

<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="98px">
      <el-form-item label="部门名称" prop="params.deptIds">
        <treeselect :disable-branch-nodes="false" :show-count="true" :clearOnSelect="true" :style="{width: '215px'}" :multiple="true" placeholder="请选择机构"
                    ref="deptPost"
                    v-model="queryParams.params.deptIds"
                    :options="deptPostOptions"
                    @input="selectProData"
                    :normalizer="normalizer"
                    @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="项目名称" prop="invoiceProjectId">
        <treeselect :disable-branch-nodes="true" :show-count="true" :clearOnSelect="true" :style="{width: '215px'}" :multiple="false" placeholder="请选择项目名称" noOptionsText="未搜索到匹配项..."
                    v-model="queryParams.invoiceProjectId"
                    :options="proPostOptions"
                    @input="selectContractaData"
                    :normalizer="normalizer1"
                    @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="合同名称" prop="invoiceContractaId">
        <treeselect :disable-branch-nodes="true" :show-count="true" :clearOnSelect="true" :style="{width: '215px'}" :multiple="false" placeholder="请选择合同名称" noOptionsText="未搜索到匹配项..."
                    v-model="queryParams.invoiceContractaId"
                    :options="conPostOptions"
                    :normalizer="normalizer2"
                    @keyup.enter.native="handleQuery"/>
      </el-form-item>
 </el-form>

解释

1. :multiple=“false”：是否可以多级勾选（true：可以）
2. noOptionsText=“未搜索到匹配项…” 如果没有搜索到，提示信息
3. :options=“proPostOptions”：这个框里面的数据，类似这样：
4. @keyup.enter.native=“handleQuery”：这个方法意思就是按了回车就执行这个方法，我若依生成的有，就不讲了。没用的可以删掉

{
    "msg": "操作成功",
    "code": 200,
    "data": [
        {
            "label": "省外",
            "value": "29"
        },
        {
            "label": "省内一般",
            "value": "30"
        },
        {
            "label": "省内简易",
            "value": "31"
        },
        {
            "label": "省内销售",
            "value": "32"
        },
        {
            "label": "233",
            "value": "34"
        }
    ]
}

5. @input=“selectContractaData”：如果选中了，执行这个方法，也就是用来获取下个框的数据
6. :normalizer=“normalizer1”：将数据格式化

data

data{
      depts: [],  // 部门数据
      pros: [],  // 项目数据
      deptPostOptions: [], // 部门选项列表
      proPostOptions: [], // 项目选项列表
      conPostOptions: [], // 合同选项列表

    queryParams: {
        pageNum: 1,
        pageSize: 10,
        invoiceProjectId: null, // 项目id
        invoiceContractaId: null, // 合同id

        params:{
          deptId: [],
          deptIds: []
        }
      },
      // 表单参数
      form: {
        params:{
          deptId: [],
          deptIds: []
        }
      },
}

methods

    /** 数据格式化 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.label,
        children: node.children,
        isDisabled: node.status === STATUS.DISABLE
      }
    },
    normalizer1(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.value,
        label: node.label,
      }
    },
    normalizer2(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.invoiceContractaId,
        label: node.contractaName,
      }
    },
    // 岗位下拉树结构
    getTreeSelect() {
      treeSelect().then(response => {
        this.deptPostOptions = response.data
      })
    },
    // 项目下拉列表
    selectProData(value, instanceId) {
      this.depts = [];
      //机构ID
      this.$refs.deptPost.selectedNodes.forEach(dept => {
        this.depts.push(dept.id)
      })
      this.queryParams.params.deptId = this.depts;
      // form中部门数据
      this.form.params.deptId = this.depts;//因为我form也用了一套，所以就有了它，没用的可以删掉

      if (this.depts.length !== 0) {
        selectProjectName(this.depts).then(response => {
          this.proPostOptions = response.data;  //获取项目列表
        })
      } else {
        this.proPostOptions = [];
        this.queryParams.invoiceProjectId = null
        this.form.invoiceProjectId = null//因为我form也用了一套，所以就有了它，没用的可以删掉
      }
    },
    // 合同下拉列表
    selectContractaData(value, instanceId) {
      if (value != null || value !== undefined) {
        selectContractaName(value).then(response => {
          this.conPostOptions = response.data;
          if (this.conPostOptions.length === 0) {
            this.conPostOptions = [];
            this.queryParams.invoiceContractaId = null;
            this.form.invoiceContractaId = null;//因为我form也用了一套，所以就有了它，没用的可以删掉
          }
        })
      } else {
        this.conPostOptions = [];
        this.queryParams.invoiceContractaId = null
        this.form.invoiceContractaId = null//因为我form也用了一套，所以就有了它，没用的可以删掉
      }
    },

created

  created() {
    this.getTreeSelect();    // 获取部门数据
  },

数据格式化对应json

normalizer格式化对应的json

{
    "msg": "操作成功",
    "code": 200,
    "data": [
        {
            "id": "-4",
            "label": "xx科技",
            "status": "0",
            "children": [
                {
                    "id": "1513830904076881920",
                    "label": "1111",
                    "status": "0"
                },
                {
                    "id": "1475726928416845824",
                    "label": "财务部",
                    "status": "0"
                },
                {
                    "id": "1475727022549528576",
                    "label": "人事部",
                    "status": "0"
                }
            ]
        }
    ]
}

normalizer1格式化对应的json

{
    "msg": "操作成功",
    "code": 200,
    "data": [
        {
            "label": "省外",
            "value": "29"
        },
        {
            "label": "省内一般",
            "value": "30"
        },
        {
            "label": "省内简易",
            "value": "31"
        },
        {
            "label": "省内销售",
            "value": "32"
        },
        {
            "label": "233",
            "value": "34"
        }
    ]
}

normalizer2格式化对应的json

{
			"deptId": "1513830904076881920",
            "invoiceProjectId": "30",
            "contractaName": "省内一般合同",
 }