当前位置：首页 > 前端教程

elementui分组

2026-03-06 01:06:45前端教程

以下是关于 Element UI 分组功能的详细说明和实现方法：

基础分组实现

在 Element UI 中，el-select 组件支持通过 el-option-group 实现分组下拉菜单。需要设置 label 属性作为分组标题，嵌套的 el-option 作为分组项。

elementui分组

<el-select v-model="value" placeholder="请选择">
  <el-option-group label="热门城市">
    <el-option label="上海" value="shanghai"></el-option>
    <el-option label="北京" value="beijing"></el-option>
  </el-option-group>
  <el-option-group label="其他城市">
    <el-option label="成都" value="chengdu"></el-option>
    <el-option label="深圳" value="shenzhen"></el-option>
  </el-option-group>
</el-select>

动态数据分组

当需要从后端获取分组数据时，可以使用 v-for 动态渲染分组结构。数据结构通常包含分组标签和子选项数组。

data() {
  return {
    groups: [
      {
        label: '热门城市',
        options: [
          { value: 'shanghai', label: '上海' },
          { value: 'beijing', label: '北京' }
        ]
      },
      {
        label: '其他城市',
        options: [
          { value: 'chengdu', label: '成都' },
          { value: 'shenzhen', label: '深圳' }
        ]
      }
    ]
  }
}

分组表单验证

结合 el-form 进行分组选择验证时，需在 rules 中定义校验规则。注意分组选择框的值绑定与普通选择框相同。

elementui分组

rules: {
  city: [
    { required: true, message: '请选择城市', trigger: 'change' }
  ]
}

自定义分组样式

通过 popper-class 属性可自定义下拉面板样式，使用 CSS 修改分组标题和选项的样式表现。

.custom-group .el-select-group__title {
  color: #ff6600;
  font-weight: bold;
}

分组表格实现

Element UI 的表格组件可通过 row-class-name 和 span-method 实现视觉分组效果。需要处理行合并逻辑和数据标记。

methods: {
  arraySpanMethod({ row, column, rowIndex, columnIndex }) {
    if (rowIndex % 2 === 0) {
      return { rowspan: 2, colspan: 1 }
    } else {
      return { rowspan: 0, colspan: 0 }
    }
  }
}