机构、元器件和层级检索系统 - 查找所需设备和信息

<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=&quot;primary&quot; @click=&quot;search1(input)&quot;&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>我在搜索框里面输了内容进去，但是点击搜索健后传送给后端显示的是空值，这怎么解决这个问题可能是由于你在点击搜索按钮时没有正确地获取输入框的值。可以尝试在搜索方法中使用<code>this.input</code>来获取输入框的值。修改<code>search1</code>方法如下：</p>
<pre><code class="language-javascript">search1() {
  alert(this.input);
  // 指定跳转地址
  this.$router.push({
    name: &quot;Table&quot;,
    params: { input: this.input },
  });
},
</code></pre>
<p>然后在<code>Table</code>组件中通过<code>this.$route.params.input</code>来获取传递的参数。</p>