element-ui 如何修改checkbox文字跟选框分开点击事件

Question

这个要点击checkbox为一个点击事件，点击文字为另外一个点击事件

<el-checkbox-group v-model="checkPort">
    <el-checkbox v-for="item in rolekindList" 
    :label="item.id" 
    :key="item.id" 
    @change="((val,$event)=>changePort(val,$event,item.id))" class="ckbox-border">
    <p>{{item.c_operation_port_name}}</p></el-checkbox>
</el-checkbox-group>

要如何修改？？？

Answer 1

可以了

<el-checkbox-group v-model="checkPort">
    <el-checkbox v-for="item in rolekindList" :label="item.id" :key="item.id" @change="((val,$event)=>changePort(val,$event,item.id))" class="ckbox-border">
        <!-- {{item.c_operation_port_name}} -->
        <p @click.prevent="lookChoice(item.id)" style="line-height:35px;">{{item.c_operation_port_name}}</p>
    </el-checkbox>
</el-checkbox-group>

改造了下代码在加了个阻止事件，就可以了，点击的函数自己重新写。这样就独立出来了

Answer 2

我觉得你不如自己写一个checkbox算了，也麻烦不到哪去

Answer 3

这个需求个人建议别用插件，只能自己封装组件了

Answer 4

sorry我之前看成了el-table
多选框的话也是可以修改的

<el-checkbox-group @change="checkChange"   v-model="checkedCities" :min="1"  :max="4">
    <div class="" v-for="city in cities">
        <el-checkbox  :label="city" :key="city">
        </el-checkbox>
        <p @click="spanClick">{{city}}</p>
    </div>
</el-checkbox-group>

循环提出来 el-checkbox 和p标签同级 至于原本的label可以display：none掉 剩下的就是调整下样式 把p标签定位到原来的位置

Answer 5

到底为什么prevent而不是stop