vxe-table-plugin-element icon indicating copy to clipboard operation
vxe-table-plugin-element copied to clipboard

Published 20 hours ago • verified publisher icon x-extends

ElSelect通过配置式的方式在表单中创建下拉选项消失

Open HamsterAPig opened this issue 9 months ago • 3 comments

可复现的链接：

https://codesandbox.io/p/sandbox/vxe-table-4-x-vue-3-0-wen-ti-yan-shi-forked-mttcxd?file=%2Fsrc%2Fmain.js%3A8%2C61&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clw6gziwa00063j6fnubj98j8%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clw6gziwa00023j6fvpnv54e4%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clw6gziwa00033j6f6fgqktx9%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clw6gziwa00053j6fdsbivzya%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clw6gziwa00023j6fvpnv54e4%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clw6gziw900013j6f8gdmyoq9%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.vue%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clw6h15xd00323j6fiv0rw9oz%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A7%252C%2522startColumn%2522%253A26%252C%2522endLineNumber%2522%253A7%252C%2522endColumn%2522%253A26%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fviews%252FDemo1.vue%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clw6h5l9v00023j6f158ggi97%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A8%252C%2522startColumn%2522%253A61%252C%2522endLineNumber%2522%253A8%252C%2522endColumn%2522%253A61%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fmain.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clw6gziwa00023j6fvpnv54e4%2522%252C%2522activeTabId%2522%253A%2522clw6h5l9v00023j6f158ggi97%2522%257D%252C%2522clw6gziwa00053j6fdsbivzya%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clw6gziwa00043j6f9b3ckx68%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clw6gziwa00053j6fdsbivzya%2522%252C%2522activeTabId%2522%253A%2522clw6gziwa00043j6f9b3ckx68%2522%257D%252C%2522clw6gziwa00033j6f6fgqktx9%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clw6gziwa00033j6f6fgqktx9%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

问题描述与截图：

见下图，使用ElSelect配置的代码摘要如下：

const xFormOpt: VxeFormProps = reactive({
  span: 24,
  titleWidth: "100px",
  loading: false,
  /** 是否显示标题冒号 */
  titleColon: false,
  /** 项列表 */
  items: [
    {
      title: "必填项",
      span: 12,
      children: [
        {
          field: "craft",
          title: "工艺",
          itemRender: {
            name: "$select",
            options: [
              { value: "DIP", label: "直插" },
              { value: "SMD", label: "贴片" }
            ]
          }
        },
        {
          field: "preferred_level",
          title: "优选等级",
          itemRender: {
            name: "ElSelect",
            options: [
              { value: "Optional", label: "可选" },
              { value: "Trial", label: "试用" },
              { value: "Stop Production", label: "停产" },
              { value: "Unavailable", label: "不可用" },
              { value: "Not Recommended", label: "不推荐" }
            ]
          }
        }]})

<template>
  <div class="app-container">
    <!-- 表格 -->
    <vxe-grid ref="xGridDom" v-bind="xGridOpt">
      <!-- 左侧按钮列表 -->
      <template #toolbar-btns>
        <vxe-button status="primary" icon="vxe-icon-add" @click="crudStore.onShowModal()" circle />
        <vxe-button status="danger" icon="vxe-icon-delete" circle />
      </template>
      <!-- 操作 -->
      <template #row-operate="{ row }">
        <el-button link type="primary" @click="crudStore.onShowModal(row)">修改</el-button>
        <el-button link type="danger" @click="crudStore.onDelete(row)">删除</el-button>
      </template>
    </vxe-grid>
    <!-- 弹窗 -->
    <vxe-modal ref="xModalDom" v-bind="xModalOpt" width="1270" height="800" resize>
      <!-- 表单 -->
      <vxe-form ref="xFormDom" v-bind="xFormOpt" />
    </vxe-modal>
  </div>
</template>

现在的问题是表单已经加载了ElSelect，但是没有正确的将options加载出来，见下图 image

我感觉是我没有正确配置，但是看文档的配置方式应该是这样添加下拉选项的

使用的库的版本信息：

  • "element-plus": "2.6.2",
  • "vue": "3.4.21",
  • "vue-router": "4.3.0",
  • "vxe-table": "4.5.21",
  • "vxe-table-plugin-element": "4.0.2",

期望的结果：

ElSelect可以正确的显示下拉列表选项

操作系统：

Windows 11

浏览器版本：

Edge 123.0.2420.65; Firefox 125.03

vue 版本：

3.4.21

vxe-table 版本：

4.5.21

HamsterAPig avatar May 14 '24 14:05 HamsterAPig

image 从html文件l来看是没有生成选项，排除index的问题

HamsterAPig avatar May 14 '24 14:05 HamsterAPig

我的应用方式有问题，在群友的指点下，下面这个似乎是正确的应用方式

        {
          field: "craft",
          title: "工艺",
          itemRender: {
            name: "ElSelect",
            props: {
              options: [
                { value: "DIP", label: "直插" },
                { value: "SMD", label: "贴片" }
              ],
              filterable: true,
              allowcreate: true,
              teleported: true
            }
          }
        },

但是这样的话，html组件那里的显示为

<div class="el-select" options="[object Object],[object Object]" allowcreate="true">

这里的渲染器似乎没有正确处理这个options数组

HamsterAPig avatar May 16 '24 15:05 HamsterAPig

好吧，是我配置出错了，这个插件支持配置式的用法的，可以跑的代码如下

{
        {
          field: "preferred_level",
          title: "优选等级",
          itemRender: {
            name: "ElSelect",
            props: {
              placeholder: "优选等级",
              clearable: true,
              filterable: true,
              defaultFirstOption: true,
              teleported: false
            },
            options: [
              { key: "Optional", value: "Optional", label: "可选" },
              { key: "Trial", value: "Trial", label: "试用" },
              { key: "Stop", value: "Stop Production", label: "停产" },
              { key: "Unavailable", value: "Unavailable", label: "不可用" },
              { key: "Recommended", value: "Not Recommended", label: "不推荐" }
            ]
          }
        },

需要注意的是，ElSelect的teleported属性要设置为false，之前因为这个折腾了好久

HamsterAPig avatar May 16 '24 23:05 HamsterAPig