# 4.10 网格选择（Grid Select）

网格选择组件，用于以网格形式展示可选项

# 基础用法

<template>
  <dof-grid-select :list="list" :cols="4" @select="onSelect" @overLimit="onOverLimit" />
</template>

<script>
export default {
  data() {
    return {
      list: [
        { text: '选项1', value: 1 },
        { text: '选项2', value: 2, checked: true },
        { text: '不可选择', value: 3, disabled: true },
      ],
    }
  },
  methods: {
    onSelect({ selectIndex, checked, checkedList }) {
      console.log(selectIndex, checked, checkedList)
    },
    onOverLimit(limit) {
      console.log(`最多可选 ${limit} 项`)
    },
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# Attributes

Prop Type Required Default Description
id String N 'one' 组件标识，用于多实例场景
cols Number N 4 列数
single Boolean N false 是否单选
list Array N [] 列表数据
limit Number N - 最大可选数量
custom-styles Object N {} 自定义选项样式，可设置 lineSpacing
need-dark-mode Boolean N false 是否启用 M-dark/T-dark 内置暗黑适配
isRTL Boolean N false 是否启用 RTL（从右到左）布局；默认关闭 ^2.5.10

设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。

# list 数据项

字段 Type Required Default Description
text String N - 选项显示文本
value Any N - 选项值，由内部 option 组件消费
checked Boolean N false 初始选中状态；单选模式仅保留首个有效选中项
disabled Boolean N false 是否禁用；禁用项不可选中
color String N '' 普通文字颜色
checkedColor String N '' 选中文字颜色
disabledColor String N '' 禁用文字颜色
backgroundColor String N '' 普通背景颜色
checkedBackgroundColor String N '' 选中背景颜色
disabledBackgroundColor String N '' 禁用背景颜色

父组件向全部选项透传暗黑开关；这些颜色字段可设置在 list 单项或 customStyles 中，单项配置优先。

# Events

事件名 说明 回调参数
select 选中状态变化 { selectIndex, checked, checkedList }
overLimit 超出最大可选数量 limit

← 5.1 列表项（Cell） →