若依框架前后端分离treeselect 部室下拉选择框

温馨提示：记得数据库建表时，在自己新建的表内加一个dept_id字段，方便后续写表链接

新生成的index.vue

//对deptId进行操作，包括后续也是将deptId存入表内，通过表连接查询显示部门名称
<el-form-item label="单位部室" prop="deptId">
    <treeselect v-model="form.deptId" :options="deptOptions" :show-count="true" placeholder="请选择部门" />
</el-form-item>

<script>
//deptTreeSelect方法写在新生成的js文件中，引用路径要写对
import {deptTreeSelect} from "@/api/contract/contract";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  dicts: ['deptName'],
  // 在组件中添加treeSelect
  components: {Treeselect},
  data() {
    return {
        // 部门树选项
        deptOptions: [],
    };
  },
  created() {
      this.getDeptTree();
  },
  methods: {
      /** 查询部门下拉树结构 */
      getDeptTree() {
          deptTreeSelect().then(response => {
              this.deptOptions = response.data;
              console.log(this.deptOptions)
          });
      },
};
</script>

新生成的***.js

/ 查询部门下拉树结构
export function deptTreeSelect() {
  return request({
  // **.js的文件名
    url: '/contract/contract/deptTree',
    method: 'get'
  })