前端 - 怎么不触发el-select的关闭面板？

Question

<template>  <div class="app-container">    <el-select v-model="serviceName" placeholder="请选择" size="mini">      <el-option        v-for="(item, index) in serviceList"        :key="index"        :label="item.service_alias"        :value="item.service_name"      />      <el-pagination        :page-sizes="[100, 200, 300, 400]"        :page-size="100"        layout="total, sizes, prev, pager, next, jumper"        :total="400"      >      </el-pagination>    </el-select>  </div></template><script>export default {  data() {    return {      serviceName: null,      serviceList: [        {          service_alias: 1,          service_name: 2        }      ]    };  }};</script>

怎么让点击这里的不会把这个el-select的弹出框给关闭？现在是会关闭

Answer 1

这个el-select-dropdow是插入到body上的，它的点击事件会冒泡到body，然后使el-select-dropdow隐藏，所以想阻止它可以从两个方面入手。一是阻止它的点击事件，但是这个是分页组件内的options，无法去修改，二是让它不插入到body，在element-plus中可以设置teleported，需要版本2.3.13及以上，在element-ui中没找到相应属性，应该做不了。可以看看能不能曲线救国，比如舍弃分页的select，单独写个select和分页进行联动。

Answer 2

要防止el-select的弹出框被关闭，你可以使用append-to-body属性，并将其设置为true。这将使弹出框附加到文档的主体，而不是关闭点击事件。

在模板中，你可以将append-to-body属性添加到el-select元素中，如下所示：

<el-select v-model="serviceName" placeholder="请选择" size="mini" append-to-body="true">  <!-- 其他内容 --></el-select>

这样设置后，点击el-select的弹出框外部将不会关闭它。