Shulou(Shulou.com)06/01 Report--

This article will explain in detail the sample analysis on the encapsulation of all selected components in vue. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Effect.

Encapsulated component

Select all {{item}} import {channelList} from "@ / utils/app-channel" Export default {name: "Index", data () {return {/ / Channel list all channels channelList: channelList, / / uncertain status of checkbox Generally used to achieve the effect of all selection isIndeterminateBool: true, / / check all defaults: checkAll: false, data: this.checkList,}}, computed: {checkList: {get: function () {return (this.item [this.formDBName] | |'). Split ("|") .filter (str = > (!! str)) }, set: function (newValue) {this.item [this.formDBName] = newValue.join ("|") }}, props: {/ / form name label: {type: String, required: true}, / / currently selected item: {type: Object, required: true}, formDBName: {type: String, required: true}} Methods: {getArrayCheckList () {return (this.item [this.formDBName] | |') .split ("|") .filter (str = > (!! str) }, / / return the data to the parent component setChooseData (data) {this.$emit ("choose-data", this.formDBName, data)}, / / value represents whether the two values of ture false, handleCheckAllChange (value) {const chooseChannel = Object.keys (this.channelList) this.checkList = value, are selected or not selected? ChooseChannel: []; this.isIndeterminateBool = false; this.checkAll = value; const formData = this.checkList.join ("|"); this.setChooseData (formData)}, / / calculate all selected handleCheckedCitiesChange (value) {const chooseChannel = Object.keys (this.channelList); let checkedCount = value.length; this.checkAll = checkedCount = = chooseChannel.length; this.isIndeterminateBool = checkedCount > 0 & & checkedCount

(! str & & typeof (str) = = 'string')}}

Channel list

/ export const channelList = {"anguo": "an Guo", "baidu": "Baidu", "huawei": "Huawei", "samsung": "Samsung", "oppo": "OPPO", "sanliuling": "sanliuling", "meizu": "Meizu", "vivo": "VIVO", "wandoujia": "Pea pod", "xiaomi": "Xiaomi" "yyb": "YingYongBao", "yyh": "Application Exchange",}

Parent component use

Item [channle] is stored in a string to | split the data.

such as

Baidu | anguo | yyb

Like this

OnCheckResult onCheckResult (dbName, res) {this.item [dbName] = res;} this article ends here. I hope the above content can be helpful to you, so that you can learn more knowledge. If you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.