vue+element-ui下拉框--下拉table

淩亂°似流年 2023-06-27 11:21 41阅读 0赞

项目中有一个需求，用户点击下拉框，下拉列表为一个表格，但是element里面没有这个组件，于是组装一个，效果如下：  
![在这里插入图片描述][20200106154723927.png]  
选择后：  
![在这里插入图片描述][20200106145952520.png]  
.vue：

<el-form-item label="请选择用户" prop="member" style="width: 100%;">
         <el-input
             style="width:400%;"
             placeholder="选择用户"
             v-model="formInline.member"      // 选择后的结果
             :suffix-icon="showTree?'el-icon-arrow-up':'el-icon-arrow-down'"   // input框上下箭头
             @click.native="deptogglePanel($event)"      // table显示隐藏
             size="medium"
             readonly="readonly"  // input只读
         ></el-input>
         <div v-if="showTree" class="treeDiv" ref="tableList">
             <el-table 
                 @row-click="handleRegionNodeClick"     // 点击table获取点击行信息后及关闭table
                 ref="moviesTable" 
                 :data="memberList"      // table数据源
                 border
                 :cell-style="getCellStyle"      // table单元格样式
                 :header-cell-style="getHeaderCellStyle"      // table头部单元格样式
                 >
                 <el-table-column
                     v-for="(item, index) in Columns"    // table列数据
                     :key="index"
                     :prop="item.prop"
                     :label="item.label"
                     :show-overflow-tooltip="true"      // 超出显示提示框
                     >
                 </el-table-column>
             </el-table>
         </div>
    </el-form-item>

.js：

.css：

.treeDiv{ 
          position:absolute;
          top:40px;
          left:-1px;
          z-index:1000;
          width: 868px;
          overflow: auto;
          max-height: 400px;
          .el-table{ 
              border: 1px solid #ccc;
              border-radius: 6px;
          }
          .el-table /deep/ td{ 
                padding: 4px 0;
          }
      }

[20200106154723927.png]: https://img-blog.csdnimg.cn/20200106154723927.png
[20200106145952520.png]: https://img-blog.csdnimg.cn/20200106145952520.png