el-checkbox-group
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue]]
&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents
* 注意 [#ped8e2e2]
勾选选中后，返回给 el-checkbox-group 的是对应的“:label”的...
* 示例 [#f02d6a3b]
** 单选 [#i88bdc88]
下面例子里面使用了 <el-checkbox-button> 标签（最终效果是...
#codeprettify{{
<el-checkbox-group v-model="checked" size="medium">
<el-checkbox-button v-for="city in cities" :label="city...
</el-checkbox-button>
</el-checkbox-group>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
data () {
return {
checked: ['上海'],//不能为null，必须要有值
cities: cityOptions
};
}
}
}}
不能直接this.checked=[]或者等于null。因为绑定之后的数组里...
不能直接把this.checked=city 这就需要使用到“includes/包含”...
#codeprettify{{
checkbox(city) {
this.checked = this.checked.includes(city) ? [city] : [];
},
}}
** 复选 [#ea14d27b]
#codeprettify{{
<el-checkbox-group v-model="selectedBindingStatus" size="...
<el-checkbox-button v-for="item in Status" :label="valu...
</el-checkbox-button>
</el-checkbox-group>
watch:{
selectedBindingStatus:{
// 每个属性值发生变化就会调用这个函数
handler(newVal, oldVal) {
if (newVal == undefined) {
this.data.status = '';
} else if (newVal.length > 0) {
var temp = '';
newVal.forEach((element) => {
temp += element + ',';
});
if (temp != '') {
temp = temp.substring(0, temp.length - 1);
this.data.status = temp;
} else {
this.data.status = '';
}
//console.log(this.data.process_list);
} else {
this.data.status = '';
}
},
// 立即处理 进入页面就触发
immediate: true,
// 深度监听 属性的变化
deep: true,
},
},
}}
#hr();
コメント：
#comment_kcaptcha
終了行:
[[Vue]]
&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents
* 注意 [#ped8e2e2]
勾选选中后，返回给 el-checkbox-group 的是对应的“:label”的...
* 示例 [#f02d6a3b]
** 单选 [#i88bdc88]
下面例子里面使用了 <el-checkbox-button> 标签（最终效果是...
#codeprettify{{
<el-checkbox-group v-model="checked" size="medium">
<el-checkbox-button v-for="city in cities" :label="city...
</el-checkbox-button>
</el-checkbox-group>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
data () {
return {
checked: ['上海'],//不能为null，必须要有值
cities: cityOptions
};
}
}
}}
不能直接this.checked=[]或者等于null。因为绑定之后的数组里...
不能直接把this.checked=city 这就需要使用到“includes/包含”...
#codeprettify{{
checkbox(city) {
this.checked = this.checked.includes(city) ? [city] : [];
},
}}
** 复选 [#ea14d27b]
#codeprettify{{
<el-checkbox-group v-model="selectedBindingStatus" size="...
<el-checkbox-button v-for="item in Status" :label="valu...
</el-checkbox-button>
</el-checkbox-group>
watch:{
selectedBindingStatus:{
// 每个属性值发生变化就会调用这个函数
handler(newVal, oldVal) {
if (newVal == undefined) {
this.data.status = '';
} else if (newVal.length > 0) {
var temp = '';
newVal.forEach((element) => {
temp += element + ',';
});
if (temp != '') {
temp = temp.substring(0, temp.length - 1);
this.data.status = temp;
} else {
this.data.status = '';
}
//console.log(this.data.process_list);
} else {
this.data.status = '';
}
},
// 立即处理 进入页面就触发
immediate: true,
// 深度监听 属性的变化
deep: true,
},
},
}}
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
