记录element-plus + vue3.2 + tsx 开发时的问题

开发时，select组件无法通过 model-value / v-model / value 设置值。 查看了一下源码

定义的变量是 modelValue,所以修改为对应变量即可

代码

const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
]


const select_value = ref('')

<el-select
    modelValue={select_value}
    value-key="label"
    onChange={($event) => {
        select_value.value = $event
    }}>
    {!!options &&
        options.map((item) => {
            return <el-option key={item.value} label={item.label} value={item} />
        })}
</el-select>

element-plus 走马灯组件

问题记录：carousel组件在request接口请求完成后，无法正常显示图片，查看css样式时，发现dom元素中存在css 样式 display:none。

解决方案：在接口加载完成之前，做判断。需要注意的是，做判断位置在el-carousel上。（ 作者错在将判断位置放在el-carousel-item上）

贴上正确代码

js 
const state = reactive({
    banners: [],
})

isLoading()

onMounted(() => {
    const url = SERVER_INTERFACE.getIndexInfo
    nextTick(() => {
        /* 获取首页信息 */
        request({ url }).then((response: any) => {
            const { data } = response
            const { banners } = data
            state.banners = banners
            console.log(state.banners)
            isLoading(false)
        })
    })
})


<div class="board-carousel">
    {state.banners.length != 0 && (
        <el-carousel autoplay={false} initial-index={0}>
            {state.banners.map((item: any, index) => (
                <el-carousel-item key={index}>
                    <div class="board-carousel-img">
                        <img src={item.bannerImage} alt="" />
                    </div>
                </el-carousel-item>
            ))}
        </el-carousel>
    )}
</div>

element-plus 变量形式使用导致组件没有加载问题解决

问题代码

完整引入下

setup:()=>{
    const dom = <el-image  src={imageurl} />
    
    return ()=>(
    <div> {dom} </div>
    )
}

此时是不加载el-image标签的，在页面中，会将el-image直接当成html标签使用

解决方式

按需引入自己需要的标签

import { ElImage } from 'element-plus'

setup:()=>{
    const dom = <ElImage  src={imageurl} />
    
    return ()=>(
    <div> {dom} </div>
    )
}

此时就可以加载了

且他标签应该也可以按此类引入方式去使用

原来的完整引入不需要修改，可以直接使用

随笔，后续随时补充更新