搜索关键字、筛选行业、筛选地区

最新推荐文章于 2021-11-20 23:34:40 发布

from_shanghai

最新推荐文章于 2021-11-20 23:34:40 发布

阅读量436

点赞数

本文链接：https://blog.csdn.net/from_shanghai/article/details/100185113

版权

1.template
          <el-input
            size="small"
            class="selectOuter"
            v-model="selectInput.Keyword"
            placeholder="请输入企业名称或关键字"
          >
            <i class="el-icon-search el-input__icon" slot="suffix" @click="getTableData"></i>
          </el-input>
          <el-select
            size="small"
            class="selectOuter"
            v-model="selectInput.county"
            placeholder="请选择地区"
            v-if="role==2"
            @change="getTableData"
          >
            <el-option
              v-for="(item, index) in regionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select
            size="small"
            class="selectOuter"
            v-model="selectInput.questionType"
            @change="getTableData"
          >
            <el-option
              v-for="(item, index) in sourceList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
2.script
data(){ return { 
 regionList: [],
 sourceList: [],     
 selectInput: {
        Keyword: "",
        county: "全部",
        questionType: "全部"
      }
}}

sourceList 是从后台获取数据，所以
  created() {
    this.getTableData();
  },
  methods:{
    getTableData() {
      let selectInput = Object.assign({}, this.selectInput);
      Object.keys(selectInput).forEach(v => {
        selectInput[v] = selectInput[v] === "全部" ? "" : selectInput[v];
      });
      let arr = Object.assign(
        {
          pageNum: this.pageData.currentPage,
          pageSize: this.pageData.pageSize
        },
        selectInput
      );
//把 pageNum 和 pageSize与selectInput合并成 一个params
      api.planProblem(arr).then(res => {
        if (res.code === "0000") {
          this.tableData = res.data.results || [];
          this.tableData.forEach((item, index) => { this.sourceList.push(item.questionType)})

//tableData 是数组，item 是数组里每一个对象，item.xxx  取到对象里对应属性的属性值
//对 获取的数据进行操作
 })
          this.pageData.total = res.data.totalRecord;
        } else {
          this.$message({ message: res.msg, type: "error" });
          this.tableData=[];
        }
      });
    },
}

1.template
                <div class='common-search-unit'>
                    <el-input v-model="key" :placeholder="dataFlag==1?'请输入企业名称/预警名称搜索':'请输入预警名称搜索'" clearable size='small'></el-input>
                </div>
                <div class='common-search-unit' v-if='dataFlag==1'>
                    <div class='unit-search-label'>地区：</div><el-cascader v-model="area" placeholder="请选择地区"  clearable :options="areaOptions" :props="{ expandTrigger: 'hover',label:'name',value:'areaCode'}" @change="areaChange" ref='areaCascader' size='small'></el-cascader>
                </div>
                <div class='common-search-unit' v-if='dataFlag==1'>
                    <div class='unit-search-label'>行业：</div><el-cascader v-model="industry" placeholder="请选择行业" clearable :options="industryOptions" :props="{ expandTrigger: 'hover',label:'industryName',value:'code'}" @change="industryChange" ref='industryCascader' size='small'></el-cascader>
                </div>
2.
    data() {
        return {
            key:'',
            area:[],
            areaName:[],
            areaOptions:[],
            industry:[],
            industryName:[],
            industryOptions:[],
        },
    created() {
        this.areaOptions=this.$store.getters.region;
        this.industryOptions=this.$store.getters.industry;
}

        getTableData(){
            let param={
                signalName:this.key,
                areaName:this.areaName?'浙江省'+this.areaName.join(''):'',
                industryName:this.industryName?this.industryName.join(''):'',
                province:'浙江省',
                city:this.areaName?this.areaName[0]:'',
                county:this.areaName?this.areaName[1]:'',
                industryTypeFrist:this.industryName?this.industryName[0]:'',
                industryTypeSecond:this.industryName?this.industryName[1]:'',
                industryTypeThird:this.industryName?this.industryName[2]:'',
            };

import {getCascaderLabel} from "../../../common/utils/index"
        //地区筛选
        areaChange(value) {
            if(value.length>0){
                let tempData=this.$refs['areaCascader'].getCheckedNodes();
                getCascaderLabel(tempData[0],this.areaName);
            }else{
                this.areaName=[];
            }
        },
        //行业筛选
        industryChange(value){
            if(value.length>0){
                let tempData=this.$refs['industryCascader'].getCheckedNodes();
                getCascaderLabel(tempData[0],this.industryName);
            }else{
                this.industryName=[];
            }
            
        },