解决vue2+vite项目中使用el-tree-select选项不显示的问题

问题概述

在升级到vue2+vite项目后，发现el-tree-select组件在运行时无法显示选项。尽管控制台提示ReferenceError: React is not defined的错误，但实际上可以选择对应的选项。

问题分析

1. 控制台错误提示React is not defined，表明项目中可能存在对React的引用，但实际上项目使用的是Vue。
2. el-tree-select组件不显示选项，可能是由于缺少对jsx语法的处理。

解决过程

1. 根据错误提示，首先检查项目中是否有误引入React相关的内容，但未发现相关代码。
2. 考虑到el-tree-select组件使用jsx语法，推断可能是Vite配置中缺少了对jsx的处理。
3. 在网上搜索相关信息，发现Vite处理jsx的插件是@vitejs/plugin-vue2-jsx。
4. 将@vitejs/plugin-vue2-jsx添加到package.json的依赖中。
5. 在vite.config.js中配置该插件，以支持jsx语法。

配置变更

1. 安装@vitejs/plugin-vue2-jsx插件：

pnpm install @vitejs/plugin-vue2-jsx -D

packages.json:

  "dependencies": { 
    "el-tree-select": "^3.1.13",
    "element-ui": "^2.8.2",
    "vue": "2.7.16",
  },
  "devDependencies": {
    "@vitejs/plugin-vue2": "2.3.1",
    "@vitejs/plugin-vue2-jsx":"1.1.1",
    "vite": "^5.2.8",
    "vue-template-compiler": "2.7.16"
  },

2. 在vite.config.js中配置插件：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue2';
import vueJsx from '@vitejs/plugin-vue2-jsx';
export default defineConfig({
  plugins: [vue(), vueJsx()],
});

结果

经过以上配置，el-tree-select组件的选项显示问题得到解决，同时控制台中的ReferenceError: React is not defined错误也消失了。

ps:贴一下代码部分

<template>
  <div>
    <!-- 种植方案页面 -->
    <!-- <div v-show="add"> -->
    <plandList
      ref="plandListDom"
      @childerData="getChilderData"
      v-show="plandListFlage"
    ></plandList>
    <div class="addBut" @click="replace" v-show="showAddBtn">
      去添加种植作物 +
    </div>
    <!-- </div> -->
    <!-- 去添加种植物表单 -->
    <div v-show="select" class="el-select1 from_box1">
      <el-form
        class="blo"
        ref="form"
        :model="form"
        :rules="formRules"
        label-width="155px"
        label-position="left"
      >
        <div class="flex flex-wrap">
          <el-form-item
           class="border-box padding-lr-sm flex-item e_label_1"
            label="作物类型"
            prop="plantBreed"
          >
            <!-- 下拉tree -->
            <el-tree-select
              ref="treeSelect"
              class="crop-type-tree padding-lr-sm"
              v-model="form.plantBreed"
              :selectParams="selectParams"
              :treeParams="orgParams"
              :treeRenderFun="_renderFun"
              @searchFun="_searchFun"
              @node-click="_nodeClickFun"
              @check="_nodeClickFun"
            />
          </el-form-item>
          <el-form-item
            label="熟制"
            class="border-box padding-lr-sm flex-item"
            v-if="typeTwo"
            prop="cooked"
            ><el-input v-model="form.cooked"></el-input
          ></el-form-item>
          <el-form-item
            label="种植方式"
            class="border-box padding-lr-sm flex-item"
            prop="mode"
            ><el-input v-model="form.mode"></el-input
          ></el-form-item>
          <el-form-item
            label="播种密度"
            class="border-box padding-lr-sm flex-item"
            prop="sowingDensity"
          >
            <el-input
              v-model.number="form.sowingDensity"
              size="medium"
              placeholder="请输入最大30000范围内数值（株/亩)"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="移栽密度"
            class="border-box padding-lr-sm flex-item"
            v-if="typeTwo"
            prop="transferDensity"
          >
            <el-input
              v-model.number="form.transferDensity"
              size="medium"
              placeholder="请输入最大30000范围内数值（株/亩)"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="浇灌方式"
            class="border-box padding-lr-sm flex-item"
            prop="irrigationMethod"
          >
            <el-input v-model="form.irrigationMethod" size="medium"></el-input>
          </el-form-item>
          <el-form-item
            label="是否覆膜"
            class="border-box padding-lr-sm flex-item"
            prop="isMulching"
          >
            <el-select
              v-model="form.isMulching"
              placeholder=""
              style="width: 100%; height: 0"
            >
              <el-option
                v-for="item in mulchingList"
                :key="item.plantCode"
                :label="item.plantName"
                :value="item.plantCode"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="播种时间"
            class="border-box padding-lr-sm flex-item"
            prop="sowTime"
          >
            <el-col :span="24">
              <el-date-picker
                style="width: 100%"
                v-model="form.sowTime"
                type="date"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item
            label="移栽时间"
            class="border-box padding-lr-sm flex-item"
            v-if="typeTwo"
            prop="transferTime"
          >
            <el-date-picker
              v-model="form.transferTime"
              type="date"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="选择日期"
              style="width: 470px"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            label="是否使用复合肥"
            class="border-box padding-lr-sm flex-item"
            prop="isFertilizer"
          >
            <el-col :span="24">
              <el-select
                style="width: 100%; height: 0"
                v-model="form.isFertilizer"
                placeholder="请选择是否使用"
              >
                <el-option
                  v-for="item in whetherUseList"
                  :key="item.plantCode"
                  :label="item.plantName"
                  :value="item.plantCode"
                ></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item
            v-if="form.isFertilizer !== '1'"
            label="复合肥类型"
            class="border-box padding-lr-sm flex-item"
            prop="fertilizerType"
          >
            <!-- 下拉tree -->
            <el-tree-select
              ref="treeSelect2"
              class="crop-type-tree"
              v-model="form.fertilizerType"
              :selectParams="selectParams2"
              :treeParams="orgParams2"
              :treeRenderFun="_renderFun2"
              
              @searchFun="_searchFun2"
              @node-click="_nodeClickFun2"
              @check="_nodeClickFun2"
            />
          </el-form-item>
        </div>
        <div class="flex justify-center">
          <el-button
            type="success"
            :loading="showLoading"
            @click="preservation"
            style="width: 15%"
            >保存</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<script lang="jsx">
// 添加表单
import plandList from "./pland-list.vue";
import { addLands, fertilizerType, CropType } from "@/api/farmEvent";
export default {
  name: "planPage",
  components: { plandList },
  inject: ["reload"],
  data() {
    // 检查播种密度
    var checkSowingDensity = (rule, value, callback) => {
      if (value > 30000) {
        callback(new Error("不得大于30000株"));
      } else {
        callback();
      }
    };

    return {
      plandListFlage: false, // 是否存在种植方案
      showAddBtn: true,
      add: true,
      select: false,
      showLoading: false,
      plantCode: "",
      typeTwo: false, // 水稻种类显示隐藏
      form: {
        ids: [], // 地块id 集合
        plantBreed: "", // 种子下拉树选中 种植品种
        plant: "", // 父级id
        plantId: "", // 物类型id 种植品种
        plantName: "", // 种植种类
        isMulching: "0", // 是否覆膜
        isFertilizer: "", // 是否使用复合肥
        fertilizerType: "", // 复合肥使用类型
        mode: "", // 种植方式
        sowingDensity: "", // 播种密度
        irrigationMethod: "", // 灌溉方式
        sowTime: "", // 播种时间
        // 水稻
        cooked: "", // 熟制
        transferDensity: "", // 移栽密度
        transferTime: "", // 移栽时间
      },
      formRules: {
        plantBreed: [
          { required: true, message: "值不可为空", trigger: "blur" },
        ],
        cooked: [{ required: true, message: "值不可为空", trigger: "blur" }],
        mode: [{ required: true, message: "值不可为空", trigger: "blur" }],
        sowingDensity: [
          { required: true, message: "值不可为空", trigger: "blur" },
          { type: "number", message: "必须为数字值" },
          { validator: checkSowingDensity, trigger: "blur" },
        ],
        transferDensity: [
          { required: true, message: "值不可为空", trigger: "blur" },
          { type: "number", message: "必须为数字值" },
        ],
        irrigationMethod: [
          { required: true, message: "值不可为空", trigger: "blur" },
        ],
        isMulching: [
          { required: true, message: "值不可为空", trigger: "blur" },
        ],
        sowTime: [{ required: true, message: "值不可为空", trigger: "blur" }],
        transferTime: [
          { required: true, message: "值不可为空", trigger: "blur" },
        ],
        isFertilizer: [
          { required: true, message: "值不可为空", trigger: "blur" },
        ],
        fertilizerType: [
          { required: true, message: "值不可为空", trigger: "blur" },
        ],
      },
      mulchingList: [], // 是否覆膜
      // OptionsList: [], // 作物种类
      // VarietiesList: [], // 作物品种
      whetherUseList: [], // 是否使用复合肥
      // UseTypeList: [], //复合肥类型
      listParames: {},
      // 下拉树传参
      treePrams: {},
      // 种子下拉组织树
      selectParams: {
        multiple: false,
        clearable: true,
        placeholder: "请选择作物类型",
      },
      // 种子下拉树数据
      orgParams: {
        clickParent: false,
        filteraable: true,
        "check-strictly": true,
        "default-expand-all": false,
        "expand-on-click-node": false,
        data: [],
        props: {
          children: "children",
          label: "goodName",
          disabled: "disabled",
          value: "id",
        },
      },
      // 化肥下拉组织树
      selectParams2: {
        multiple: false,
        clearable: true,
        placeholder: "请选择作物类型",
      },
      // 化肥下拉树数据
      orgParams2: {
        clickParent: false,
        filteraable: true,
        "check-strictly": true,
        "default-expand-all": false,
        "expand-on-click-node": false,
        data: [],
        props: {
          children: "children",
          label: "goodName",
          disabled: "disabled",
          value: "id",
        },
      },
      // numChange:0//传给子组件的值
    };
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.listParames = JSON.parse(localStorage.getItem('listParames'))
    //   this.form.ids.push(this.listParames.id)
    //   // 获取种子下拉数据
    //   this.getSeedData()
    //   // 获取化肥下拉数据
    //   this.getfertilizerList()
    //   this.getAllTypeList()
    // })
  },
  methods: {
    async init() {
      this.form.ids = [];
      this.$nextTick(() => {
        this.plandListFlage = true;
        this.showAddBtn = false;
        this.select = false;

        this.listParames = JSON.parse(localStorage.getItem("listParames"));
        this.form.ids.push(this.listParames.id);
        // 获取种子下拉数据
        this.getSeedData();
        // 获取化肥下拉数据
        this.getfertilizerList();
        this.getAllTypeList();
        this.$refs.plandListDom.init();
      });
    },

    // 下拉树
    // 获取下拉树
    // async getTreeData() {
    //   const response = await CropType(this.treePrams);
    //   if (response.data.code == 200) {
    //     this.orgParams.data = response.data.data
    //     this.$refs.treeSelect.treeDataUpdateFun(response.data.data);
    //   }
    // },
    // 获取种子下拉数据
    async getSeedData() {
      this.treePrams.classify = "seed"; // 下拉树接口参数赋值种子
      const response = await CropType(this.treePrams);
      if (response.data.code == 200) {
        this.orgParams.data = response.data.data;
        this.$refs.treeSelect.treeDataUpdateFun(response.data.data);
      }
    },
    // 种子树点击
    _nodeClickFun(data, node, vm) {
      if (data.parentId == 6) {
        this.typeTwo = true;
      } else {
        this.typeTwo = false;
      }
      this.form.plantBreed = "";
      this.form.plantBreed = data.id;
      // 获取父级种类名册接收id
      this.form.plantName = data.parentId;
      // 获取父级id
      this.form.plantId = data.parentId;
    },
    // 树过滤
    _searchFun(value) {
      console.log(value, "<--_searchFun");
      // 自行判断 是走后台查询，还是前端过滤
      // this.$refs.treeSelect.$refs.tree.filter(value);
      this.$refs.treeSelect.filterFun(value);
      // 后台查询
      // this.$refs.treeSelect.treeDataUpdateFun(treeData);
    },
    // 自定义render
    _renderFun(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
        </span>
      );
    },

    // 去添加种植作物 按钮
    replace() {
      // 表单
      this.select = true;
      // 列表
      this.add = false;
      this.showAddBtn = false;
    },
    // 接收子组件列表的值
    getChilderData(item) {
      // console.log((Object.keys(item)==0),'-------=======接收列表组件值');
      this.plandListFlage = item;
      this.showAddBtn = !item;
    },
    // 获取化肥下拉数据
    async getfertilizerList() {
      // 获取化肥类型
      this.treePrams.classify = "chemical_fertilizer"; // 下拉树接口参数赋值复合肥
      const response = await CropType(this.treePrams);
      if (response.data.code == 200) {
        this.orgParams2.data = response.data.data;
        this.$refs.treeSelect2.treeDataUpdateFun(response.data.data);
      }
    },

    // 化肥树点击
    _nodeClickFun2(data, node, vm) {
      this.form.fertilizerType = data.id;
    },
    // 树过滤
    _searchFun2(value) {
      console.log(value, "<--_searchFun");
      // 自行判断 是走后台查询，还是前端过滤
      // this.$refs.treeSelect.$refs.tree.filter(value);
      this.$refs.treeSelect2.filterFun(value);
      // 后台查询
      // this.$refs.treeSelect.treeDataUpdateFun(treeData);
    },
    // 自定义render
    _renderFun2(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
        </span>
      );
    },

    // 是否用薄膜和是否用化肥
    getAllTypeList() {
      // 是否覆膜
      this.mulchingList = [
        {
          plantName: "是",
          plantCode: "0",
        },
        {
          plantName: "否",
          plantCode: "1",
        },
      ];
      // 是否使用复合肥类型
      this.whetherUseList = [
        {
          plantName: "是",
          plantCode: "0",
        },
        {
          plantName: "否",
          plantCode: "1",
        },
      ];
    },
    // 保存
    preservation() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.showLoading = true;
          const response = await addLands(this.form);
        
          if (response.data.code == 200) {
            // 弹出保存成功弹框
            this.$message({
              type: "success",
              message: response.data.msg,
            });
            // 表单
            this.select = false;
            // 列表
            this.add = true;
            this.showLoading = false;
            this.$nextTick(() => {
              this.$refs.plandListDom.getList();
            });
          } else {
            this.$message({
              type: "warning",
              message: response.data.msg,
            });
            this.showLoading = false;
          }
        } else {
          console.log("未通过验证");
        }
      });
    },
  },
};
</script>

<style scoped="">
.crop-type-tree >>> .el-tree-select-input {
  width: 100% !important;
}

.flex-item {
  width: 50% !important;
  display: flex !important;
  align-items: center !important;
}

.flex-item >>> .el-form-item__label {
  line-height: 1.5 !important;
}
.flex-item >>> .el-form-item__content {
  margin-left: 0 !important;
  width: 100% !important;
}
.e_label_1 >>> .el-tree-select{
  padding: 0;
}
</style>

<style lang="scss" scoped>
.Center-img {
  text-align: center;
  margin: 20px 0;
}
.blo {
  width: 100%;
}
.addBut {
  padding: 5px 10px;
  color: #66c999;
  /* border: 1px solid #11c26d; */
  background-color: rgb(212, 245, 208);
  border-radius: 5px;
  width: 180px;
  text-align: center;
  margin: 20px auto;
  cursor: pointer;
}

.el-select {
  margin-bottom: 20px;
}

/* 表单 */
.demo {
  padding: 10px;
  display: flex;
  width: 100%;
}

/* .demo_{
	  width: 50%;
	} */
.demo1 {
  padding: 0 10px;
  display: flex;
}

.input {
  display: flex;
  margin-left: 15px;
  width: 50%;
}

.label {
  width: 50%;
  margin-top: 10px;
}

::v-deep.el-input--small .el-input__icon {
  height: 20px;
}

.from_box {
  width: 100%;
  /* 父级不可选择 */
  .el-tree-node__content {
    .el-checkbox {
      display: none !important;
    }
  }
  /* 子级可选择 */
  .el-tree-node__children {
    .el-checkbox {
      display: inline-block !important;
    }
  }
}
</style>