vue + el-checkbox 单选功能

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

      
        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 }} ({{item.NUM == ''? 0 : item.NUM }})                              
              el-checkbox>
            el-scrollbar>
         div>
      
 
 
  export default {
 
   data() {
     return {
       checkedCols: [],
        
  }
 },
 methods: {
   // 单选 - 操作
    handleCheckboxChange(value, type) {
        this.checkedCols.length > 1 && this.checkedCols.shift();
        this.formInfo[type] = value.toString();      
    },
 
}
}