vue 项目实现el-checkbox实现搜索

我想实现通过专家领域选中搜索对应的内容
怎么在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>

el-checkbox-group、el-checkbox都可以 加change事件

img

el-checkbox 中 当绑定值变化时触发的事件是change 

 <el-checkbox v-for="city in cities" :label="city" :key="city" @change="">{{city}}el-checkbox>