我想实现通过专家领域选中搜索对应的内容
怎么在el-chenckbox里面添加事件？
<el-card class="all">
<div class="jia" style="margin-right:30px; font-size: 14px;color: dimgrey;">专家领域：</div><br>
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
<div style="margin: 15px 0;"></div>
<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
</el-checkbox-group>
<el-form :inline="true">
<br><el-form-item label="专家姓名" style="margin-right:30px;" prop="listdata.keyword">
<el-input style="width:200px;" v-model="listdata.keyword"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleFilter">查询</el-button>
<el-button type="info" plain @click="queryReset">重置</el-button>
</el-form-item>
</el-form>
<div class="expertbase" @click="gotolink(item)" v-for="(item,index) in form" :key="index">
<div class="wbk">
<div class="ly">【{{item.territoryDesc}}】</div>
<br> <img :src="item.imageUrl" alt="" >
<div class="name">{{item.name}}</div>
<div class="time">出生时间：{{item.dateBirth}}</div>
<div class="dw">工作单位：{{item.unit}}</div>
<div class="xq">查看详情 >></div>
</div>
<div class="wbktow">
<div class="ly">【{{item.territoryDesc}}】</div>
<br> <img :src="item.imageUrl" alt="" >
<div class="name">{{item.name}}</div>
<div class="time">出生时间：{{item.dateBirth}}</div>
<div class="dw">工作单位：{{item.unit}}</div>
<div class="xq">查看详情 >></div>
</div>
</div>
</el-card>
<el-card class="alltow">
<img class="top" src="../../assets/img/pic-fire.png" alt="">
<div class="tjfour">专家推荐</div>
<div class="expertbasetow" @click="gotolink(item)" v-for="(item,index) in form" :key="index">
<br> <img class="imfour" :src="item.imageUrl" alt="" >
<div class="namefour">{{item.name}}</div>
<div class="timefour">出生时间：{{item.dateBirth}}</div>
<div class="dwfour">工作单位：{{item.unit}}</div>
<div class="wbkfour"><div class="xqfour">查看详情 >></div></div>
</div>
<div class="expertbasetow" @click="gotolink(item)" v-for="(item,index) in form" :key="index">
<img class="imfour" :src="item.imageUrl" alt="" >
<div class="namefour">{{item.name}}</div>
<div class="timefour">出生时间：{{item.dateBirth}}</div>
<div class="dwfour">工作单位：{{item.unit}}</div>
<div class="wbkfour"><div class="xqfour">查看详情 >></div></div>
</div>
</el-card>
<div class="eight">
<el-pagination
@current-change="handleCurrentChange"
:current-page.sync="listdata.pageNum"
:page-size="listdata.pageSize"
layout="total,prev, pager, next, jumper"
:total="total">
</el-pagination>
</div>
</div>
</template>
<script>
// 专家领域的选择内容
const cityOptions = ['不限', '园林（设计）建筑设计、结构设计、建筑装饰设计 道路、桥梁',
'电力电信', '给排水', '环境工程', '勘察设计', '工程造价', '林业',
'旅游管理', '其他'];
import {getExpertsList} from "@/api/index";
export default{
data(){
return{
input: '',
listdata:{
dictCode:'',
keyword: "",
pageNum:1,
pageSize:10,
},
error: '',
loading:false,
// 参数
list:{
id:""
},
form:{},
checkAll: false,
// 默认选择
checkedCities: ['环境工程', '园林（设计）建筑设计、结构设计、建筑装饰设计 道路、桥梁'],
cities: cityOptions,
isIndeterminate: true
}
},
// 接口
mounted(){
this.list.id=this.$route.query.id
this.getList()
},
methods:{
getList(){
this.loading=true;
getExpertsList(this.listdata).then(resp =>{
this.form=resp.rows;
this.total=resp.total;
this.loading=false;
}).catch(()=>{
this.loading=false;
});
},
// 跳转详情页面
gotolink(item){
this.$router.push({
path: "/expertdetail",
query:{id:item.id}
})
},
// 跳转首页
goBack(){
this.$router.push({
path: "/index"
})
},
handleCurrentChange(val){
this.listdata.pageNum=val;
this.getList();
},
// 查询验证设置
handleFilter(){
this.listdata.pageNum = 1;
this.getList();
},
queryReset(){
let obj = this.listdata;
for (let key in obj) {
obj[key] = "";
}
this.listdata.pageNum = 1;
this.listdata.pageSize = 10;
this.getList();
},
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
}
}
</script>
