机构检索、元器件检索、层级检索 - 工厂自动化设备搜索

<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()&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()">搜索</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()">搜索</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() {                 //上面传的参数是item，在这里自己取名为y
      alert(this.input)
      //指定跳转地址
      this.$router.push({
        name: "Table",                //跳转页面的路由名字
        params: this.input,                //传递给下一个页面的参数
      });
    },
    search2() {                 //上面传的参数是item，在这里自己取名为y
      //指定跳转地址
      this.$router.push({
        name: "Table",                //跳转页面的路由名字
        params: { value: this.value, value2: this.value2, value3: this.value3, num1: this.num1, num2: this.num2, num3: this.num3 },                //传递给下一个页面的参数
      });
    },
    search3(y) {                 //上面传的参数是item，在这里自己取名为y
      //指定跳转地址
      this.$router.push({
        name: "Table",                //跳转页面的路由名字
        params: y,                //传递给下一个页面的参数
      });
    }
  }
  
  }
   
</script>
<style>
.demonstration{
  color: black;
  font-size:25px;
}

</style>