vue + el-checkbox 单选功能

最新推荐文章于 2024-10-10 00:22:48 发布

HZM_CSDN

最新推荐文章于 2024-10-10 00:22:48 发布

阅读量2.5k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/HZM_CSDN/article/details/127945504

版权

需求: 用 el-checkboc 实现单选功能并且当选中某一项时则回填到input框里,当点击 enter 键或者是按下搜索图标按键,来实现页面搜索内容的同步展示;如图:

      <el-checkbox-group 
        placeholder="请选择"
        size="small"
        v-model="checkedCols"
        clearable
        filterable  
        @change="handleCheckboxChange($event, column.prop)"                      
        > 
         <div style="height:200px;" class="scrollbar">
            <el-scrollbar style="height:50%,width: 100%;">
              <el-checkbox
                style="display:block;margin-left:10px;"
                v-for="item in tableHeaderList"
                :key="item.value"
                :label="item.FIELD"
                :value="item.ROW_ID"
                >{{ item.FIELD }}&nbsp;({{item.NUM == ''? 0 : item.NUM }})                              
              </el-checkbox>
            </el-scrollbar>
         </div>
      </el-checkbox-group>


  export default {

   data() {
     return {
       checkedCols: [],
        
  }
 },
 methods: {
   // 单选 - 操作
    handleCheckboxChange(value, type) {
        this.checkedCols.length > 1 && this.checkedCols.shift();
        this.formInfo[type] = value.toString();      
    },

}
}