VUE_静态多选（含表单验证）VUEHtml开发

HTML代码

引入vue和element的cnd或者你download的源码（这咱就不管啦哈哈哈哈哈）

 <div class="application-content-unit margin-top-70">
                    <div class="el-form-item is-required">
                        <label for="inputAttest" class="el-form-item__label" style="width: 100px;">所属栏目</label>
                        <div class="el-form-item__content" style="margin-left: 100px;">
                            <div class="min-chose-tip" style="display:none">请至少选择一个栏目！！</div>
                            <div class="max-chose-tip" style="display:none">最多选择三个栏目！！</div>
                            <div class="el-input">
                                <div class="be-chosen-label">
                                    <!-- 被选容器 -->
                                    <!-- <span class="be-chosen-label-unit"><span>老六</span><span class="delete-be-chosen-label">X</span></span> -->
                                </div>
                                <input type="text" autocomplete="off" placeholder="搜索栏目" maxlength="30"
                                    class="el-input__inner width-half" id="search-industry"
                                    oninput="search_industry(this)">
                            </div>
                            <div class="chose-label-wrap">
                                <!-- 菜单容器 -->
                               
                            </div>
                        </div>
                    </div>
                </div>

CSS文件放在最下面，自行摘录

js部分：

        为了偷懒：我引入了jq@11

        其中我引入的options_data为普通数据

// 写入行业
    function inputDate() {
        for (var i in options_data.categoryArr) {
            var category_html = "";
            category_html += '<div class="certification-subject-unit">'
            category_html += '        <div class="certification-subject-title" categoryId="' + options_data
                .categoryArr[i].categoryId + '">' + options_data.categoryArr[i].categoryName + '</div>'
            category_html += '        <div class="certification-subject-content">'
            var sub_data_each = options_data.categoryArr[i].subCategoryArr;
            for (var k in sub_data_each) {
                category_html += '<span class="sub-option" onclick="choseOption(this)" subCategoryId="' + sub_data_each[
                    k].subCategoryId + '">' + sub_data_each[k].subCategoryName + '</span>'
            }
            category_html += '        </div>'
            category_html += '    </div>';
            $('.chose-label-wrap').append(category_html);
        }
    }
    // 搜索                                           
    function search_industry( obj) { // ================================================================================ 
        let getInputValue = $(obj).val().trim(); //获取去除所有空格的值<======！！！看这里！！！  以工装为例，如果是“ 工   装 ”将检索不出来
        var subOption = $(
            ".sub-option"); // ================================================================================ 
        $(subOption).removeClass("category-option-active");
        for (let i = 0; i < subOption.length; i++) {
            if ($(subOption[i]).text().indexOf(getInputValue) != -1 && getInputValue != "") {
                $(subOption[i]).addClass("category-option-active");
            }
        }
    }
    // 选择
    function choseOption(obj) {
        var father_class_text = $(obj).parent().siblings(".certification-subject-title").text(); //获取大类名称
        var __this_obj_text = $(obj).text(); //当前类别名
        var __this_obj_subcategory_id = $(obj).attr("subcategoryid") //当前的自定义属性值
        // console.log(__this_obj_subcategory_id);
        if ($(obj).hasClass("category-option-active-chose")) {
            $(obj).removeClass("category-option-active-chose");
            $(".be-chosen-label span[subcategoryid=" + __this_obj_subcategory_id + "]").remove()
            $(".max-chose-tip").hide();
        } else {
            $(obj).removeClass("category-option-active");
            $(obj).addClass("category-option-active-chose");
            /** 
             * 点击根据自定义类名传入先择框
             * 传入内容为 一级类+被选择子类
             * 最多传入三个，最少传入一个，如果溢出则不再添加，如果不选则弹出提示
             * 已选择类别根据自定义属性关联
             */
            if ($(".be-chosen-label-unit").length < 3) {
                var be_chosen_label_html = "";
                be_chosen_label_html += '<span class="be-chosen-label-unit" subcategoryid="' +
                    __this_obj_subcategory_id +
                    '" onclick="remove_label(this)"><span>' + father_class_text +
                    '</span><span class="delimiter-in-be-chosen-label">|</span><span>' +
                    __this_obj_text + '</span><span class="delete-be-chosen-label">×</span></span>';
                $(".be-chosen-label").append(be_chosen_label_html);
            } else {
                $(obj).removeClass("category-option-active-chose");
                $(".max-chose-tip").show()
            };
        }
        min_chose_one()
    }
    // 移除已选
    function remove_label(obj) {
        var __this_obj_subcategory_id = $(obj).attr("subcategoryid") //当前的自定义属性值
        $(obj).remove();
        $(".chose-label-wrap").find("span[subcategoryid=" + __this_obj_subcategory_id + "]").removeClass(
            "category-option-active-chose")
    }
    // 数据
    var options_data = {
        "categoryArr": [{
            "categoryId": 1,
            "categoryName": "综合要闻",
            "subCategoryArr": [{
                "subCategoryId": 11,
                "subCategoryName": "要闻"
            }, {
                "subCategoryId": 12,
                "subCategoryName": "资讯"
            }]
        }, {
            "categoryId": 13,
            "categoryName": "新能源",
            "subCategoryArr": [{
                "subCategoryId": 13,
                "subCategoryName": "地泵"
            }, {
                "subCategoryId": 14,
                "subCategoryName": "太阳能"
            }]
        }
    }
    // 限制至少选择一项
    function min_chose_one() {
        if ($(".be-chosen-label-unit").length <= 0) {
            $(".min-chose-tip").show()
        } else {
            $(".min-chose-tip").hide()
        }
    }
    // 此函数必须在数据插入后调用
    inputDate()
    // 提交数据 并验证     ***** 此处数据已于vue提交的数据  请注意 ******
    function puton_chose_date(obj, value) {
        var submit_array_ = []
        var _chose_label_length_ = $(".be-chosen-label .be-chosen-label-unit").length
        for (let n = 0; n < _chose_label_length_; n++) {
            console.log($(".be-chosen-label .be-chosen-label-unit").eq(n).attr("subcategoryid"));
            submit_array_.push($(".be-chosen-label .be-chosen-label-unit").eq(n).attr("subcategoryid"))
        }
        if (submit_array_ == "" || submit_array_ == undefined || submit_array_ == null) {
            $(".min-chose-tip").show();
        } else {
            $(".min-chose-tip").hide();
            window.vm._data.ruleForm.submit_array_ = submit_array_
            window.vm.register('ruleForm');
        }
    }

 那点css：摒弃你想喷我得冲动，有一些不想动的样式我动了，但是，我是有道理的！你不喷！！！你都看到这里了，你摸摸你的良知，你真想喷我嘛！

.application-content-unit {
    width: 100%;
}

/* 调整位置 */

.el-form-item__content {
    margin-left: 50px !important;
}

.el-form-item__label {
    width: 172px !important;
}

/* .el-input__inner{
    width: 320px !important;
} */

.width-320 .el-input__inner {
    width: 320px;
}

.margin-left-10-percent {
    margin-left: 48% !important;
}

.width-280 .el-input__inner {
    width: 280px !important;
}

.el-input-group__append {
    cursor: pointer;
}

.chose-label-wrap {
    width: 100%;
    border-radius: 0 0 4px 4px;
    padding: 15px;
    border-bottom: 1px solid #DCDFE6;
    border-left: 1px solid #DCDFE6;
    border-right: 1px solid #DCDFE6;
    margin-top: -2px;
}

.certification-subject-title {
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}

.certification-subject-content span {
    display: inline-block;
}

.certification-subject-content span {
    margin-right: 24px;
}

.width-half {
    z-index: 2019;
}

.width-half,
.be-chosen-label {
    height: 40px;
    /* width: 51% !important; */
    display: inline-block !important;
    float: left;
    box-sizing: border-box;
}

.width-half {
    width: 20% !important;
}

.be-chosen-label {
    width: 82%;
    border-bottom: 1px solid #DCDFE6;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
    border-radius: 4px 0 0 4px;
    margin-right: -2%;
}

.category-option-active {
    color: red;
    font-weight: 600;
    animation: changeshadow 1s ease-in infinite;
    /* 其它浏览器兼容性前缀 */
    -webkit-animation: changeshadow 1s linear infinite;
    -moz-animation: changeshadow 1s linear infinite;
    -ms-animation: changeshadow 1s linear infinite;
    -o-animation: changeshadow 1s linear infinite;
}

.category-option-active-chose {
    color: red;
}

.sub-option {
    cursor: pointer;
}

@keyframes changeshadow {
    0% {
        text-shadow: 0 0 4px #c14934
    }

    50% {
        text-shadow: 0 0 40px #c14934
    }

    100% {
        text-shadow: 0 0 4px #c14934
    }
}

/* 添加兼容性前缀 */
@-webkit-keyframes changeshadow {
    0% {
        text-shadow: 0 0 4px #c14934
    }

    50% {
        text-shadow: 0 0 40px #c14934
    }

    100% {
        text-shadow: 0 0 4px #c14934
    }
}

@-moz-keyframes changeshadow {
    0% {
        text-shadow: 0 0 4px #c14934
    }

    50% {
        text-shadow: 0 0 40px #c14934
    }

    100% {
        text-shadow: 0 0 4px #c14934
    }
}

@-ms-keyframes changeshadow {
    0% {
        text-shadow: 0 0 4px #c14934
    }

    50% {
        text-shadow: 0 0 40px #c14934
    }

    100% {
        text-shadow: 0 0 4px #c14934
    }
}

@-o-keyframes changeshadow {
    0% {
        text-shadow: 0 0 4px #c14934
    }

    50% {
        text-shadow: 0 0 40px #c14934
    }

    100% {
        text-shadow: 0 0 4px #c14934
    }
}

.be-chosen-label {
    padding: 0 15px;
    white-space: nowrap;
    overflow-x: scroll;
}

.be-chosen-label::-webkit-scrollbar {
    width: 10px;
    height: 3px;
    /**/
}

.be-chosen-label::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
}

.be-chosen-label::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 10px;
}

.be-chosen-label::-webkit-scrollbar-thumb:hover {
    background: #333;
}

.be-chosen-label::-webkit-scrollbar-corner {
    background: #179a16;
}

.be-chosen-label-unit {
    display: inline-block;
    height: 25px;
    line-height: 24px;
    padding: 0 15px;
    background-color: rgba(66, 133, 244, .2);
    margin-top: 7px;
    border-radius: 5px;
    color: rgba(66, 133, 244, 1);
    margin-right: 16px;
    cursor: pointer;
}

.delete-be-chosen-label {
    margin-left: 8px;
    color: rgba(66, 133, 244, 1);
    font-size: 16px;
    padding: 0 5px;
}

.delete-be-chosen-label:hover {
    color: white;
    background-color: rgba(66, 133, 244, 1);
    border-radius: 15px;
    transition-duration: 0.18s;
}

.delimiter-in-be-chosen-label {
    margin: 0 5px;
}

.min-chose-tip,
.max-chose-tip,
.intelligent-validate-tip {
    font-size: 12px;
    color: red;
    float: right;
    margin-top: -40px;
}


.el-table__header{
    display:none !important
  }