0
点赞
收藏
分享

微信扫一扫

Element-ui的el-select组件使用记录:将el-select放到el-table中页面不更新问题的解决方案

月孛星君 2022-04-04 阅读 123

本文主要记录多选操作

Element-ui官网参考

一、像下面这样直接使用,页面选择下拉列表数据,页面时不会更新的

 <!-- 表格区开始 -->
 <el-table size="mini" :data="tableData" style="width: 98%">
   <el-table-column label="select" width="100">
     <!-- <template slot-scope="scope"> -->
       <el-select
         v-model="value1"
         multiple
         placeholder="请选择"
       >
         <el-option
           v-for="item in options"
           :key="item.value"
           :label="item.label"
           :value="item.value"
         >
         </el-option>
       </el-select>
     <!-- </template> -->
   </el-table-column>
</el-table>
<!-- 表格区结束 -->

在这里插入图片描述

二、将el-select放到el-table中页面不更新问题的解决方案

 <!-- 表格区开始 -->
 <el-table size="mini" :data="tableData" style="width: 98%">
   <el-table-column label="select" width="100">
     <template slot-scope="scope">
       <el-select
         v-model="value1"
         multiple
         placeholder="请选择"
       >
         <el-option
           v-for="item in options"
           :key="item.value"
           :label="item.label"
           :value="item.value"
         >
         </el-option>
       </el-select>
     </template>
   </el-table-column>
</el-table>
<!-- 表格区结束 -->

在这里插入图片描述

三、使用@visible-change和@remove-tag实现业务功能

 <!-- 表格区开始 -->
 <el-table size="mini" :data="tableData" style="width: 98%">
   <el-table-column label="select" width="100">
     <template slot-scope="scope">
       <el-select
         v-model="value1"
         multiple
         placeholder="请选择"
         @visible-change="changeValue"
         @remove-tag="removeTag"
       >
         <el-option
           v-for="item in options"
           :key="item.value"
           :label="item.label"
           :value="item.value"
         >
         </el-option>
       </el-select>
     </template>
   </el-table-column>
</el-table>
<!-- 表格区结束 -->

在这里插入图片描述
在这里插入图片描述

举报

相关推荐

0 条评论