机构、元器件和层级检索工具 - 轻松查找所需信息

<template>
<div>
<el-main>
<h2 style='color: rgb(0, 106, 255);'> 机构检索:</h2>
<el-input v-model='input' style='width:40%' placeholder='请输入机构名称'></el-input>
<p>&lt;el-button type='primary' @click='search1(input)'&gt;搜索</el-button></p>
<h2 style='color: rgb(0, 106, 255);'> 元器件及其数量检索:</h2>
<el-select v-model='value'  placeholder='请选择元器件1'> 
  <el-option v-for='item in option ' :key='item.value' :label='item.label' :value='item.value'></el-option>
  </el-select>
  <!-- &nbsp &nbsp &nbsp &nbsp &nbsp -->
  <el-input-number v-model='num1'  label='元器件数量' ></el-input-number>
  <el-select v-model='value2'  placeholder='请选择元器件2'> 
  <el-option v-for='item in option ' :key='item.value' :label='item.label' :value='item.value'></el-option>
  </el-select>
  <!-- &nbsp &nbsp &nbsp &nbsp &nbsp -->
  <el-input-number v-model='num2' label='元器件数量' ></el-input-number>
  <el-select v-model='value3'  placeholder='请选择元器3件'> 
  <el-option v-for='item in option ' :key='item.value' :label='item.label' :value='item.value'></el-option>
  </el-select>
  <!-- &nbsp &nbsp &nbsp &nbsp &nbsp -->
  <el-input-number v-model='num3'  label='元器件数量' ></el-input-number>
  <!-- &nbsp &nbsp &nbsp &nbsp &nbsp -->
  <el-button type='primary' size='big' @click='search2(item)'>搜索</el-button>
  <el-button type='primary'  size='big' @click.native.prevent='deleteRow(scope.$index)'>重置</el-button>
  <h2 style='color: rgb(0, 106, 255);'> 层级检索:</h2>
  <div class='block'>
    <span class='demonstration'>请选择依次选择类别、属性、特性:</span> 
   <el-cascader :options='options' :props='props' clearable></el-cascader> 
   <el-button type='primary' @click='search3(item)'>搜索</el-button>
   </div> 
</el-main>
</div>
</template>
<script>
export default {
  data(){
    return{
      input:'',
      option:[{ value:'选项1',
    label:'伺服电机'},
    {value:'选项2',
    label:'变频器'},
    {value:'选项3',
    label:'电磁阀'},
    {value:'选项4',
    label:'反射传感器'},
    {value:'选项5',
    label:'对射传感器'},
    {value:'选项6',
    label:'接近开关'},
    {value:'选项7',
    label:'微动开关'},
    {value:'选项8',
    label:'扫码器'}],
    value:'',
    value2:'',
    value3:'',
    num1:'',
    num2:'',
    num3:'',
    props: { multiple: true }, 
options: [{ value: 1, label: '搬运', 
                    children: [{ value: 2, label: '线性式', 
                                              children: [ { value: 3, label: '单轴' }, { value: 4, label: '多轴搬运' }, { value: 5, label: '气缸机构' } ] }]}, 
                                   
          { value: 6, label: '检测段工艺', 
                      children: [{ value: 7, label: '参数品质', 
                                              children: [ { value: 8, label: '胶钉检测' }, { value: 9, label: '盖帽检测' }, { value: 10, label: '焊后检测' },{ value: 11, label: '盖帽检测' },{ value: 12, label: '测厚' },{ value: 13, label: '扫码称重' },{ value: 14, label: '扫码' },{ value: 15, label: '氦检' } ]}, 
                                    { value: 16, label: '电池工艺', 
                                              children: [ { value:17, label: '激光焊接' }, { value: 18, label: '电池抽负压' } ]  }, 
                                    { value: 19, label: '外观质量',
                                               children: [ { value: 20, label: '大面检测' }, { value: 21, label: '盖板检测' } ]}]}, 
          { value: 22, label: '物流输送',
                      children: [{ value: 23, label: '单向输送', 
                                              children: [ { value: 24, label: '定位' }, { value: 25, label: '无阻挡' }, { value: 26, label: '阻挡' } ] }, 
                                    { value: 27, label: '换向转运', 
                                              children: [ { value: 28, label: '单出口顶升横移' }, { value: 29, label: '多出口顶升横移' } ]  },                            
                                     { value: 30, label: '提升机', 
                                              children: [ { value: 31, label: '定向' }, { value: 32, label: '阻挡' } ]  }] }                           
                                                                                                                                 
              
                                                                                                                                 ] };
    },
     //methods里放方法，方法名字自己取，HTML里绑定的叫啥这里就叫啥
  methods:{
    search1(y){                 //上面传的参数是item，在这里自己取名为y
      alert(y)
      //指定跳转地址
      this.$router.push({
        name: 'Table',                //跳转页面的路由名字
        params: y,                //传递给下一个页面的参数
      });
    },
    search2(y){                 //上面传的参数是item，在这里自己取名为y
      //指定跳转地址
      this.$router.push({
        name: 'Table',                //跳转页面的路由名字
        params: y,                //传递给下一个页面的参数
      });
    },
    search3(y){                 //上面传的参数是item，在这里自己取名为y
      //指定跳转地址
      this.$router.push({
        name: 'Table',                //跳转页面的路由名字
        params: y,                //传递给下一个页面的参数
      });
    }
  }
  
  }
   
</script>
<style>
.demonstration{
  color: black;
  font-size:25px;
}

</style>
<p>有几个可能的原因导致搜索框内容传送给后端为空值：</p>
<ol>
<li>
<p>数据绑定问题：请确保<code>v-model</code>绑定的<code>input</code>变量在<code>data</code>中初始化为空字符串。</p>
</li>
<li>
<p>事件处理问题：请确保搜索按钮的点击事件<code>@click</code>绑定的方法<code>search1</code>能够正确地接收输入的内容。可以在方法内部使用<code>console.log()</code>打印接收到的内容，以确保内容被正确传递。</p>
</li>
<li>
<p>路由跳转问题：请确保<code>this.$router.push</code>方法中的路由名字<code>Table</code>对应的组件存在，并且能够正确接收参数。</p>
</li>
</ol>
<p>如果以上解决方法都不起作用，还可以进一步检查网络请求是否成功发送，并查看后端接收到的数据是否正确。</p>