RowSelect 行选择器

说明

一个支持单选、多选的选择器，用于按行展示选项值，并且可以展开、隐藏过多的选项。

用法示例

多选模式

默认情况下为多选模式

选项

全部

选项0

选项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

选项26

选项27

选项28

选项29

更多

选中值：

<template>
  <y-row-select v-model="value" :options="options" @change="changeHandle"></y-row-select>

  <div style="margin-top: 20px;">选中值：{{ value }}</div>
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')

const options = ref([])

for (let i = 0; i < 30; i++){
  options.value.push({
    label: "选项" + i,
    value:i
  })
}


const changeHandle = (val) => {
  console.log(val)
}

</script>

隐藏源码

单选模式

单选

不限

选项0

选项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

选项26

选项27

选项28

选项29

更多

选中值：

<template>
  <y-row-select v-model="value" :options="options" @change="changeHandle" label-text="单选" single all-text="不限"></y-row-select>

  <div style="margin-top: 20px;">选中值：{{ value }}</div>
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')

const options = ref([])

for (let i = 0; i < 30; i++){
  options.value.push({
    label: "选项" + i,
    value:i
  })
}


const changeHandle = (val) => {
  console.log(val)
}

</script>

隐藏源码

高级用法

可以将多个 RowSelect 组合成为高级筛选组件

高级筛选

t1

全部

t1-0

t1-1

t1-2

t1-3

t1-4

t1-5

t1-6

t1-7

t1-8

t1-9

t1-10

t1-11

t1-12

t1-13

t1-14

t1-15

t1-16

t1-17

t1-18

t1-19

t1-20

t1-21

t1-22

t1-23

t1-24

t1-25

t1-26

t1-27

t1-28

t1-29

更多

t2

全部

t2-0

t2-1

t2-2

t2-3

t2-4

t2-5

t2-6

t2-7

t2-8

t2-9

t2-10

t2-11

t2-12

t2-13

t2-14

t2-15

t2-16

t2-17

t2-18

t2-19

t2-20

t2-21

t2-22

t2-23

t2-24

t2-25

t2-26

t2-27

t2-28

t2-29

更多

t3

全部

t3-0

t3-1

t3-2

t3-3

t3-4

t3-5

t3-6

t3-7

t3-8

t3-9

t3-10

t3-11

t3-12

t3-13

t3-14

t3-15

t3-16

t3-17

t3-18

t3-19

t3-20

t3-21

t3-22

t3-23

t3-24

t3-25

t3-26

t3-27

t3-28

t3-29

更多

{}

<template>
  <div class="advance-wrap">
    <div class="advance-title">
      <span>高级筛选</span>
      <el-button type="primary" size="small" @click="reset">重置</el-button>
    </div>
    <div class="advance-content">
      <y-row-select :key="item.prop" ref="rowSelectRefs" v-for="item in options" v-model="form[item.prop]" :options="item.options"
        :label-text="item.label" />
    </div>
  </div>

  <div>
    <pre>{{ form }}</pre>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const form = ref({})

const rowSelectRefs = ref([])

// 基础用法
const options = ref([
  {
    prop: 't1',
    label: 't1',
    options: []
  },
  {
    prop: 't2',
    label: 't2',
    options: []
  },
  {
    prop: 't3',
    label: 't3',
    options: []
  }
])

options.value.forEach(item => {
  for (let i = 0; i < 30; i++) {
    item.options.push({
      label: item.label + '-' + i,
      value: item.prop + '-' + i,
      disabled: i % 2 === 0
    })
  }
})

const reset = () => {
  rowSelectRefs.value.forEach(item => {
    item.reset()
  })
}
</script>

<style scoped>
.advance-wrap {
  width: 100%;
  border: 1px solid #e5e5e5;

  .advance-title {
    font-size: 14px;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 16px;
    height: 40px;
    box-sizing: border-box;
  }

  .advance-content {
    padding: 8px 16px;
  }
}
</style>

隐藏源码

API

Attributes

属性名	说明	类型	默认值
model-value / v-model	绑定值	string / number / array	''
single	是否为单选模式	boolean	false
duration	收缩展开动画时长，单位ms	number	200
defaultLines	默认显示行数	number	1
label-width	label宽度	string	'auto'
label-align	label水平对齐方式，对应text-align属性的值	enum	'left'
label-text	label文字	string	'选项'
separator	是否显示分隔符	boolean	true
label-styles	label文字的样式	object	—
fold-text	右侧按钮折叠状态时文字	string	'更多'
unfold-text	右侧按钮展开状态时文字	string	'收起'
show-icon	是否显示箭头图标	boolean	true
icon-position	图标位于按钮方位	enum	'left'
btn-styles	右侧按钮样式	object	—
options	选项数组	object	[]
show-all	是否显示全部选项	boolean	true
all-text	全部选项文字	string	'全部'
item-height	选项高度，只支持px单位	string / number	'24px'
item-width	选项宽度	string / number	'auto'
gap	选项间距，支持数字或带px单位，多个值用逗号分隔	string	'8'
define-props	定义选项的属性映射	object	{ label: 'label', value: 'value', disabled: 'disabled'}
item-styles	选项样式集	object	—

RowSelectOption

属性名	说明	类型	默认值
label	选项标签	string	—
value	选项值	string / number	—
disabled	是否禁用	boolean	false

Slots

名称	说明	参数
default	选项内容插槽	object
all	"全部"选项内容插槽	—

Events

事件名	说明	类型
change	选择变化时触发	Function
fold	折叠状态变化时触发	Function

Exposes

名称	说明	类型
trigger	触发折叠/展开	Function
clear	清空值	Function
reset	重置组件状态，包括值	Function

CSS Variables

变量名	说明	默认值
--text-font-size	字号	var(--el-font-size-base)
--text-label-color	标签文本颜色	var(--el-text-color-regular)
--text-label-font-size	标签文本字号	var(--el-font-size-base)
--text-item-color	选项文本颜色	var(--el-text-color-regular)
--text-item-font-size	选项文本字号	var(--el-font-size-base)
--active-item-color	选项选中时文本颜色	var(--el-color-white)
--active-item-bg-color	选项选中时背景颜色	var(--el-color-primary)
--disabled-item-color	选项禁用时文本颜色	var(--el-text-color-disabled)
--disabled-item-bg-color	选项禁用时背景颜色	var(--el-color-disabled)
--hover-item-color	选项hover时文本颜色	var(--el-text-color-primary)
--hover-item-bg-color	选项hover时背景颜色	var(--el-color-primary-light-9)

类型定义

interface RowSelectDefineProps {
  label?: string;
  key?: string;
  disabled?: string;
}