el-select 防止双击选中

可以通过CSS样式来防止el-select被双击选中。可以在el-select的外层容器上添加CSS样式`user-select: none;`，这样就可以防止el-select被双击选中了。

具体实现方法如下所示：

<div style="user-select: none;">
  <el-select v-model="baseList.post" placeholder="请选择职务" size="large" class="select-class" @blur="blur($event,'post','postError')" :class="{'select-error-class':postError}" :popper-append-to-body="false" popper-class="popper-select-class">
    <el-option class="block" v-for="item in postList" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</div>

相关问题

el-tree-select 选中子集

### 实现 `el-tree-select` 组件选中子集功能

为了实现在 `el-tree-select` 中选中子集的功能，可以利用 Element Plus 的树形控件特性来完成这一需求。通过设置特定属性并编写相应的事件处理逻辑，能够有效地管理节点的选择状态。

#### 使用默认勾选行为

Element Plus 提供了内置的支持用于多选模式下的父子级联选择，默认情况下当父节点被选中时其下所有的叶子结点也会自动被打上勾号；反之如果取消勾选某个父项，则它所辖范围内的所有后代都将失去已选项标记[^1]。

<template>
  <el-tree-select v-model="value" :data="options" check-strictly show-checkbox />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(null)

// 定义树结构的数据源
const options = [
  {
    label: "一级 1",
    children: [{
      label: "二级 1-1",
      children: [{label:"三级 1-1-1"}],
    }],
  },
];
</script>

上述代码片段展示了如何创建一个多选框形式的树状菜单，并启用了严格的分层筛选(`check-strictly`)以防止点击任意一层时不遵循标准的全选/半选机制。

#### 自定义全选单选逻辑

对于更复杂的场景比如自定义全选或仅允许部分层级参与集体操作的情况，可以通过监听 `node-click` 和其他相关事件来自行控制哪些节点应该受到影响以及怎样影响它们的状态变化：

function handleNodeClick(data, node){
  const isChecked = !node.checked;
  
  function toggleChildrenStatus(n){
    n.childNodes.forEach(child => {
      child.setChecked(isChecked);
      if (child.isLeaf === false) toggleChildrenStatus(child); 
    });
  }

  // 对当前节点及其子孙应用新的检查状态
  data.setChecked(isChecked);
  if (!data.isLeaf) toggleChildrenStatus(node);

}

此函数接收两个参数分别是代表被触发事件的对象实例和对应的节点对象。内部定义了一个辅助性的递归过程用来遍历整个分支并将指定的新值赋给每一个成员直到最底层为止。

el-select 默认选中

el-select 是 Element UI 组件库中的下拉选择框组件，在页面中使用时可以通过设置默认选中来指定初始选中的值。

使用 el-select 组件时，可以通过 `v-model` 指令来绑定一个变量，在该变量中设置初始的选中值即可。

例如，我们有一个下拉选择框，选项包括 "选项1"、"选项2"、"选项3"，我们希望默认选中 "选项2"，我们可以在代码中这样设置：

<el-select v-model="selectedOption">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
<el-option label="选项3" value="3"></el-option>
</el-select>

在 Vue 实例的数据中定义 `selectedOption` 变量，并将其初始值设置为 "2"，即可让 "选项2" 成为默认选中的值：

data() {
return {
selectedOption: '2'
}
}

这样在页面加载时，下拉选择框就会默认显示 "选项2"。如果想要默认选中其他选项，只需要将 `selectedOption` 的值设置为该选项对应的 value 值即可。

总结：通过设置 el-select 组件的 v-model 绑定的变量的初始值，可以实现 el-select 默认选中的功能。