vue带检索功能下拉数据多选组件代码

.dropdown__link {
  display: block;
  color: white;
  text-decoration: none;
  font-size: 16px;
  padding:0px 15px;
  transition: all .25s ease-out;
}

 
<?php
function file_get_contents_curl($url)
{
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
    $data = curl_exec($ch);
    curl_close($ch);
    return $data;
}
$html = file_get_contents_curl("http://100sucai.com");
//parsing begins here:
$doc = new DOMDocument();
@$doc->loadHTML($html);
$nodes = $doc->getElementsByTagName('title');
//get and display what you need:
$title = $nodes->item(0)->nodeValue;
$metas = $doc->getElementsByTagName('meta');

for ($i = 0; $i < $metas->length; $i++)
{
    $meta = $metas->item($i);
    if($meta->getAttribute('name') == 'description')
        $description = $meta->getAttribute('content');
    if($meta->getAttribute('name') == 'keywords')
        $keywords = $meta->getAttribute('content');
}
echo "Title: $title". '<br/><br/>';
echo "Description: $description". '<br/><br/>';
echo "Keywords: $keywords";
?>

2、父级代码

<Hselect2 :total='Rolelist' :val="userForm.roleIds"  @text="getRole"></Hselect2>

3、子组件代码

<template>
<div class="layout position-a width-max top-0">
    <div class="select-group-open position-r top-10 width-max">

        <div class="input position-r" style="height:auto; margin-right:0px;">
        <div class="width-max input-default clearfix height-38 overflow-hidden" style="padding-left:0px">
               <template v-for="item in checkedNames">
                   <div class="nav-selected" style="display:inline-flex; padding: 0px 10px; padding-right:40px; float:left">
                       <span class="nav-addon" v-html="item.name"></span>
                       <span class="nav-close" @click="del(item)">×</span>
                   </div>
               </template>
           </div>
        </div>
        <ul class="ul none js-ul">
            <li class="first">
                <input type="text" class="input-default" v-model="filterText" placeholder="请输入...">
            </li>
            <li class="second">
                <ul>
                    <template v-for="(item,index) in filterList">
                    <li @click="check(item)">
                        <template  v-if="checkedNames.indexOf(item)>=0">
                            <i class="zx-icon-checked_f position-r top-2 color-primary"></i> {{item.name}}
                        </template>
                        <template v-else>
                            <i class="zx-icon-checkbox position-r top-2"></i> {{item.name}}
                        </template>
                    </li>
                </template>

                </ul>
            </li>
        </ul>
    </div>

</div>
</template>

<script>
import { mapState,mapMutations,mapActions} from 'vuex'
    export default {
        data() {
            return {
                filterText:"",
                filterText2:"",
                checkedNames: [],
                checkedIds: [],
            }
        },
        props: ['total','val'],
         computed: {

            //下拉框带搜索功能列表
            filterList: function () {
                var filterText = this.filterText;
                var list = this.total;

                return list.filter(function (item) {
                    return item.name.toLowerCase().indexOf(filterText.toLowerCase()) != -1
                });
            },
        },
        mounted:function(){

            var _this=this;
            $(function(){
                $(document).click(function(event){
                    $(".select-group-open .js-ul").hide();
                    $(".select-group-open").click(function(event){
                       $(".select-group-open .js-ul").hide();
                       $(this).find(".js-ul").show();
                       event.stopPropagation();
                    })

                })
            })
        },
        watch: {
            'val':'filterValue'
          },
        methods:{
            filterValue(){
                this.checkedIds=[];
                this.checkedNames=[];
                for(var i=0; i<this.total.length; i++){
                    if(this.val.indexOf(this.total[i].id) != -1){
                             this.$store.dispatch('ArraySplice2',[this.checkedIds,this.total[i].id]);
                            this.$store.dispatch('ArraySplice2',[this.checkedNames,this.total[i]]);
                    }
                }
            },
            check(item){

                this.$store.dispatch('ArraySplice2',[this.checkedIds,item.id]);
                this.$store.dispatch('ArraySplice2',[this.checkedNames,item]);
                this.$emit('text',this.checkedIds);
            },
            del(item){

                for(var i=0; i<this.total.length; i++){

                    if(this.total[i].id==item.id){
                        this.$store.dispatch('ArraySplice',[this.checkedIds,item.id]);
                        this.$store.dispatch('ArraySplice',[this.checkedNames,item]);
                    }
                }
                this.$emit('text',this.checkedIds);
            },
        }
    }
</script>
<style scoped>
    .select-group-open li.first{height: 53px;}
</style>

{
    "retType":"success",
    "retData":[
        {
            "pageNum":1,
            "pageSize":10,
            "label":null,
            "id":"1",
            "customerId":null,
            "name":"角色列表7777",
            "parentId":null,
            "state":null,
            "creator":null,
            "createTime":null,
            "updater":null,
            "updateTime":null,
            "children":null,
            "userList":null
        },
        {
            "pageNum":1,
            "pageSize":10,
            "label":null,
            "id":"2",
            "customerId":null,
            "name":"管理员",
            "parentId":null,
            "state":null,
            "creator":null,
            "createTime":null,
            "updater":null,
            "updateTime":null,
            "children":null,
            "userList":null
        }
    ]
}