聊聊今天开发中遇到的一个两个组件不兼容的问题

最新推荐文章于 2024-05-22 16:01:24 发布

心潮的滴滴

最新推荐文章于 2024-05-22 16:01:24 发布

阅读量299

点赞数

分类专栏： Vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_42582773/article/details/128576685

版权

Vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

场景回现

在一个表格里面有一个字段：它是一个状态字典-使用状态（一共有四个字段：①未使用，②已使用，③已用完，④停用）。我们需要实现在表格里可以编辑这个字段，改变它的状态。

原来实现

因为我们公司这个项目使用的是vxe-table组件，而在使用状态字段单元格中，我用了一个element-plus里面的DictSelect组件，导致这两个组件不兼容，致使不能选择。

...
{
    title: "使用状态",
     dataKey: "PJ_STATUS",
     align: 'center',
     cellRenderer: (props) => {
         return TableSelectDict("select.pjgl.pj_status", props.cellData)
     },
     slots: {
         edit: (params) => {
             return [
                 <DictSelect
                     ref={setRef('PJ_STATUS')}
                     v-model={params.row[params.column.field]}
                     {...{
                         onChange: (e) => {
                             console.log("1111111111")
                             console.log("e => ", e)
                         }
                     }}
                     data={[
                         {label: "未使用", value: "0"},
                         {label: "已使用", value: "1"},
                         {label: "已用完", value: "2"},
                         {label: "停用", value: "3"},
                     ]}
                 />
             ]
         }
     },

在这里插入图片描述

原因

那是因为当点击的时候，去选择下拉框的时候，鼠标已经离开了vxe-table对应行数据，所以选择不会生效。

修改代码

我们将修改使用状态的组件改成vxe-table提供的下拉框就好了。
vxe-table官网：https://vxetable.cn/v4/#/table/module/select

对应组件
在这里插入图片描述

...
slots: {
    edit: (params) => {
         return [
             <VxeSelect size={transformFontSize(configStore.fontSize)} v-model={params.row[params.column.field]}>
             <VxeOption key="0" value="0" label="未使用"></VxeOption>
             <VxeOption key="1" value="1" label="已使用"></VxeOption>
             <VxeOption key="2" value="2" label="已用完"></VxeOption>
             <VxeOption key="3" value="3" label="停用"></VxeOption>
         </VxeSelect>
         ]
     }
 },