# 4.22 网格选择（Grid Select）
网格选择组件，用于以网格形式展示可选项
# 基础用法
<template>
<dof-grid-select :list="list" :cols="4" @dofGridSelectChange="onChange"></dof-grid-select>
</template>
<script>
export default {
data() {
return {
list: [
{ text: '选项1', value: 1 },
{ text: '选项2', value: 2 }
]
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Attributes
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
id | String | N | one | 组件标识 |
cols | Number | N | 4 | 列数 |
single | Boolean | N | false | 是否单选 |
list | Array | Y | [] | 列表数据 |
custom-styles | Object | N | {} | 自定义样式 |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
dofGridSelectChange | 选中变化事件 | e |