Раскрывающийся список в виде дерева и обычный раскрывающийся список со всеми опциями для vue framework.
Раскрывающийся список «Дерево» для vue framework и обычный раскрывающийся список с выбором всего.
Этот компонент предоставляет функции раскрывающегося списка «выбрать все» и раскрывающегося списка «дерево».
wlVueSelect
— это вторичный инкапсулированный раскрывающийся список, основанный на компоненте el-select элементаUi, который предоставляет функции выбора всех и функции выбора по умолчанию;
wlTreeSelect
— это вторичный инкапсулированный раскрывающийся список, основанный на компоненте el-tree элементаUi, который обеспечивает поддержку данных дерева и функции выбора по умолчанию;
Поскольку эти две потребности очень распространены, они выпущены как отдельный плагин.
эль-выбрать
0.4.8 Исправлена проблема, из-за которой родительский узел нельзя было отменить, когда в раскрывающемся списке дерева выбраны все дочерние узлы.
npm i wl-vue-select --save
или
npm i wl-vue-select -S
использовать
import wl from "wl-vue-select";`
import "wl-vue-select/lib/wl-vue-select.css"
Vue.use(wl);
<wlVueSelect
v-model="value"
:props="props"
:data="data"
multiple
default-select
></wlVueSelect>
<p>----------分割线------------</p>
<wlTreeSelect
leaf
width="240"
checkbox
:data="treeData"
@change="hindleChanged"
v-model="selected"
></wlTreeSelect>
data() {
return {
value: [], // 选中值
data: [
{
id: 1,
name: "海边"
},
{
id: 2,
name: "森林"
},
{
id: 3,
name: "草原"
},
{
id: 4,
name: "古城"
}
], // 数据
props: {
label: "name",
value: "id"
}, // 配置
treeData: [
{
id: "love",
name: "所有和你走过的风光",
children: [
{
id: 1,
name: "海边",
children: [
{
id: 5,
name: "蓬莱",
}
]
},
{
id: 2,
name: "森林"
},
{
id: 3,
name: "草原"
},
{
id: 4,
name: "古城"
}
]
}
],
selected: [ "1" ]// 树下拉框选中数据
};
},
methods: {
hindleChanged(val){
console.log(val,2)
console.log(this.selected)
}
},
серийный номер | параметр | иллюстрировать | тип | Необязательное значение | значение по умолчанию |
---|---|---|---|---|---|
1 | данные | опции, необязательные данные списка | Множество | - | - |
2 | реквизит | Элементы конфигурации: поле метки, в котором отображается имя, и поле значения, связывающее значение. | Объект | - | { метка: «метка», значение: «значение» } |
3 | показатьВсего | Отображение параметра全选 », если доступно более нескольких вариантов. | Число | - | 1 |
4 | defaultSelect[устарело] | Включить ли выбор по умолчанию, если全部 включено, будут выбраны все, если не все, будет выбран первый. (Пожалуйста, не присваивайте начальное значение v-модели при включении этой функции) | логическое значение | - | ЛОЖЬ |
5 | другой | Другие параметры, предоставленные el-select | - | - | - |
6 | ключ узла | При использовании раскрывающегося списка дерева вы должны использовать ключ для анализа данных. | Нить | - | ИДЕНТИФИКАТОР |
7 | выбрано[устарело] | При использовании раскрывающегося списка дерева привяжите выбранные данные [теперь изменено на v-модель] | Строка-Номер-Массив-Объект | - | - |
8 | флажок | При использовании раскрывающегося списка дерева: включать ли множественный выбор | логическое значение | - | ЛОЖЬ |
9 | ширина | Ширина при использовании раскрывающегося списка дерева, единица измерения по умолчанию — пиксели. | Строка-номер | - | 240 |
10 | лист | В раскрывающемся списке дерева можно ли выбрать только конечные узлы. | логическое значение | - | ЛОЖЬ |
11 | курок | При использовании раскрывающегося списка дерева метод запуска | Нить | клик/фокус/наведение/вручную | щелкнуть |
12 | v-модель | Значения привязки обычного и древовидного раскрывающегося списка используются так же, как и обычные элементы формы. | Строка-Номер-Массив-Объект | - | - |
13 | неполноценный | Отключить ли раскрывающийся список | логическое значение | - | ЛОЖЬ |
14 | сейчасрап | Запретить ли отображение нескольких строк. Если true, будет отображаться только одна строка. | логическое значение | - | ЛОЖЬ |
15 | noCheckedClose | Если выбрано несколько вариантов, следует ли автоматически закрывать область параметров, если все они не выбраны | логическое значение | - | ЛОЖЬ |
16 | размер | Размер и использование такие же, как у elementui. | Нить | - | середина |
17 | по умолчаниюРазвернуть все | В форме дерева: следует ли развертывать все параметры по умолчанию. | логическое значение | - | истинный |
18 | по умолчаниюExpandedKeys | В форме дерева ключи узлов по умолчанию развернуты. | Множество | - | - |
19 | фильтруемый | Включить ли функцию поиска (при добавлении раскрывающегося списка дерева он имеет ту же функцию, что и обычный раскрывающийся список) | логическое значение | - | ЛОЖЬ |
20 | фильтрFnc | В древовидной форме вы можете дополнительно настроить логику поиска. Если этот параметр не указан, поиск будет основан на поле, соответствующем метке в реквизитах. функция(значение,данные) | Функция | - | - |
двадцать один | checkСтрого | В форме дерева, не связаны ли родительский и дочерний элементы | логическое значение | - | ЛОЖЬ |
двадцать два | развернутьOnClickNode | В форме дерева: может ли щелчок по узлу расширяться или сжиматься. | логическое значение | - | ЛОЖЬ |
двадцать три | чеконкликноде | Следует ли выбирать узел при щелчке по узлу, значение по умолчанию — false, то есть узел будет выбран только при установке флажка. | логическое значение | - | ЛОЖЬ |
серийный номер | имя | иллюстрировать | параметр |
---|---|---|---|
1 | closeOptions | Закройте область параметров раскрывающегося списка дерева. | - |
0.5.8 Добавлена независимая родительско-дочерняя конфигурация в раскрывающемся списке дерева.
0.5.5 Исправлена логическая ошибка автоматического выбора, когда начальное значение привязки раскрывающегося списка дерева представляет собой простой массив; исправлен стиль вертикального центрирования;
0.5.4 Исправлена проблема, заключающаяся в том, что при первоначальном выборе всех данных каждый элемент отображается в области отображения вместо отображения «всех»; добавлена функция введения скрипта;
0.5.3 Измените название компонента на большое количество, добавьте введение по требованию;
0.5.2 Оптимизация раскрывающегося списка дерева и добавление функций поиска и пользовательского поиска.
0.5.1 Оптимизируйте раскрывающийся список дерева, и параметры отображают чрезмерные эффекты
0.5.0 Добавлено раскрывающееся дерево полей defaultExpandAll, defaultExpandedKeys.
0.4.9 Добавлен метод closeOptions для закрытия области параметров раскрывающегося списка дерева.
0.4.8 Исправлена проблема, из-за которой родительский узел нельзя было отменить, когда в раскрывающемся списке дерева выбраны все дочерние узлы.
0.4.7 Оптимизация раскрывающегося списка дерева и поддержка сворачивающихся тегов el-select
0.4.6 Оптимизируйте раскрывающийся список дерева и сделайте атрибут размера эффективным.
0.4.5 Оптимизируйте заполнитель раскрывающегося списка дерева и добавьте управление параметрами, чтобы закрыть параметр, когда все не выбраны.
0.4.2 Оптимизируйте раскрывающийся список дерева и добавьте возможность запретить несколько строк полей.
0.4.1 Оптимизация раскрывающегося списка дерева и добавление отключенных полей
0.3.9 Оптимизация раскрывающегося списка дерева для извлечения идентификатора по умолчанию, когда выбранные передаваемые данные представляют собой сложный массив;
0.3.8 Исправлена проблема, заключающаяся в том, что при выборе нескольких вариантов раскрывающегося списка дерева очищается только область отображения, но флажок дерева не очищается, когда данные пусты.
0.3.7 Измените, следует ли выбирать только дочерние узлы в соответствии с полем листа при выборе раскрывающегося списка дерева.
0.3.5 Исправлен дефект выбора по умолчанию в раскрывающемся списке дерева выбора радио [когда связанное значение является массивом]
0.3.4 Исправлена проблема, заключающаяся в том, что выбранное по умолчанию поле раскрывающегося списка дерева el-tree пусто, и метод getNodes также может получить последнее значение. Обновлен пример rademe.
0.3.3 Исправлена проблема бесконечного цикла, когда в раскрывающемся списке дерева включен множественный выбор, и оптимизировано
leaf
поле, чтобы определить, следует ли возвращать только конечные узлы, когда включен множественный выбор.
0.3.2 Оптимизируйте проблему, из-за которой раскрывающийся список дерева не отображается, когда он расширяется по горизонтали.
0.3.0 Оптимизация раскрывающегося списка дерева и добавление поля режима отображения триггера.
0.2.7 При оптимизации отдельного выбора в раскрывающемся списке дерева добавляется необязательный уровень и параметр
leaf
, определяющий, можно ли выбирать только конечные узлы. Когда одиночный выбор дерева оптимизирован, подсвечивается. эффект, когда тип объекта выбран по умолчанию
0.2.5 Оптимизируйте алгоритм фильтрации раскрывающегося списка дерева, оптимизируйте раскрывающийся список дерева, чтобы усилить эффект прокрутки, когда доступные параметры слишком длинные.
0.2.4 Исправлена проблема с пустым отображением, когда showTotal превышает длину данных.
0.2.3 Обновленный пример
0.2.2 Раскрывающийся список «Добавить дерево»
0.1.2 Алгоритм обновления, нет необходимости вручную отменять опцию выбора всех при переключении со всего выбора на один выбор
Версия 0.1.0 выпущена впервые, в нее добавлены функции выбора всех и выбора по умолчанию на основе el-select.