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"  } ]

 

__EOF__

本文作者：如风
本文链接：https://www.cnblogs.com/easyidea/p/17864085.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！