el select 选项多列，换行，表格，数据量大，全部显示，自定义el-select，el-select插入表格

1、效果图：

2、实现：

自定义下拉框内容，采用radio或checkbox作为选项绑定值

<template>
  <el-select  v-model="props.modelvalue" v-bind="$attrs" clearable>
    <!-- 隐藏的option组件，展示下面的插槽 -->
    <el-option v-show="false" value="1" />
    <!-- 实际要插入下拉框中的内容 -->
    <div style=" width:300px;  max-height: 500px; overflow: auto;">
      <el-radio-group v-model="selectValue" @change="$emit('update:modelvalue', selectValue)">
        <el-radio style="width:60px;margin-right:0px" v-for="itme in props.Options" :key="itme.value" :label="itme.value"  border size="small">{{ itme.label }}</el-radio>
      </el-radio-group>
    </div>
  </el-select>
</template>

<script  setup>

const emit = defineEmits(['update:modelvalue'])
const props = defineProps({
  //绑定的值
  modelvalue: { type: Number },
  //起始值
  Options: { type: Array ,default:[]},
});

// 本地绑定的值
const selectValue = ref('');

// 初始化
selectValue.value = props.modelvalue;

</script>

 

3、使用：

 <select-grid v-model:modelvalue="form.endDay" :Options="dayOption" placeholder="每月第几日"></select-grid>

   const dayOption=[ {  "value": "1",  "label": "1"  },  {  "value": "2",  "label": "2"  } ]