# SelectMul 多选-绑定字符串
多选-字符串形式
# 基础用法
- Apple
- Banana
- Cherry
- Durian
无数据
<template>
<div>
<jp-select-mul v-model="selectedFruits" :options="fruitOptions" placeholder="Select fruits"></jp-select-mul>
v-model:{{ selectedFruits }}
</div>
</template>
<script>
export default {
data() {
return {
selectedFruits: 'apple,banana',
fruitOptions: [
{ dictLabel: 'Apple', dictValue: 'apple' },
{ dictLabel: 'Banana', dictValue: 'banana' },
{ dictLabel: 'Cherry', dictValue: 'cherry' },
{ dictLabel: 'Durian', dictValue: 'durian' }
]
}
}
}
</script>
显示代码
# 延迟加载
- Apple
- Banana
- Cherry
- Durian
无数据
<template>
<div>
<jp-select-mul v-model="selectedFruits" :options="fruitOptions" placeholder="Select fruits"></jp-select-mul>
v-model:{{ selectedFruits }}
</div>
</template>
<script>
export default {
data() {
return {
selectedFruits: '',
fruitOptions: [
{ dictLabel: 'Apple', dictValue: 'apple' },
{ dictLabel: 'Banana', dictValue: 'banana' },
{ dictLabel: 'Cherry', dictValue: 'cherry' },
{ dictLabel: 'Durian', dictValue: 'durian' }
]
}
},
mounted() {
setTimeout(() => {
this.selectedFruits = 'apple, banana'
}, 1000)
}
}
</script>
显示代码
# 集成于 renderForm
测试renderForm
<template>
<div class="layout-wrapper">
<div class="tip">测试renderForm</div>
<jp-render-form :list="renderList" :formData.sync="formValues" @query="doQuery" @reset="doReset"></jp-render-form>
</div>
</template>
<script>
export default {
methods: {
doQuery() {
console.log(this.formValues)
},
doReset() {
this.formValues = {
name: '',
region: '',
date: '',
resource: '',
username: '',
phone: ''
}
}
},
data() {
return {
formValues: {
name: '',
region: 'sh,bj',
date: '',
resource: '',
username: '',
phone: ''
},
renderList: [
{
span: 6,
type: 'input',
label: '项目名称',
prop: 'name'
},
{
span: 6,
type: 'selectMul',
label: '项目区域',
prop: 'region',
collapseTags: true,
optionList: [
{
dictValue: 'sh',
dictLabel: '上海'
},
{
dictValue: 'bj',
dictLabel: '北京'
}
],
on: {
removeTag: (data) => {
console.log('removeTag', data)
},
focus: () => {
console.log('focus')
},
blur: () => {
console.log('blur')
},
change: () => {
console.log('change')
}
}
},
{
span: 6,
type: 'input',
label: '来源',
prop: 'resource',
labelWidth: '68px'
},
{
span: 6,
type: 'input',
label: '用户名用户名',
prop: 'username'
},
{
span: 6,
type: 'input',
label: '手机号码',
prop: 'phone'
},
{
span: 6,
type: 'input',
label: '来源',
prop: 'resource',
labelWidth: '68px'
},
{
span: 6,
ml: 30,
slot: 'opration'
}
],
renderList2: [
{
span: 6,
type: 'input',
label: '项目名称',
prop: 'name'
},
{
span: 6,
type: 'select',
label: '项目区域',
prop: 'region',
optionList: [
{
dictValue: 'sh',
dictLabel: '上海'
},
{
dictValue: 'bj',
dictLabel: '北京'
}
]
},
{
span: 6,
type: 'input',
label: '来源',
prop: 'resource',
labelWidth: '68px'
},
{
span: 6,
type: 'input',
label: '用户名用户名',
prop: 'username'
},
{
span: 12,
type: 'daterange',
label: '项目时间',
prop: 'date'
},
{
span: 6,
ml: 30,
slot: 'opration'
}
]
}
}
}
</script>
<style scoped>
.layout-wrapper {
background: #f8f8f8;
}
.tip {
font-size: 14px;
padding: 12px 12px 12px 0;
}
</style>
显示代码