用了这么久的Select2插件，也该写篇文章总结总结。当初感觉Select2不是特别好用，但又找不到比它更好的下拉框插件。
 
在我的印象里Select2有2个版本，最新版本有一些新的特性，并且更新了一下方法参数，比最初版本要好看一些，本文针对新版本。
 
官网：http://select2.github.io/ 
 
演示：
 

 请选择
 
 
 
由于博客系统的原因，所以只能演示简单的功能。
 
一.文件需要引入select2.full.js、select2.min.css（4.0.1版本）和jquery.1.8.3及以上
 
最新版本的select2如果引用的jquery版本较低的话，某些功能无法正常使用。比如：清除功能allowClear: true
 
最新版本请使用<select></select>标签（对于本地化的数据你可以使用input，但ajax远程数据必须使用select）
 
二.placeholder
 
placeholder占位提示文字，如果需要清楚功能，则必须设置placeholder。
 
三.加载本地数据
 
select2默认的数据属性是id、text，新版本可以自定义，但还是用默认的比较好。所以提供的json中最好转换为id、text形式，当然可以添加其他属性。
 
 
 

  
 
 
 
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$("#c01-select").select2({
  data: data,
  placeholder:'请选择',
  allowClear:true
})
 
 

  
 
 
 
四.加载远程数据
 
 
 

  
 
 
 
$("#c01-select").select2({
  ajax: {
    url: "data.json",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term,
      };
    },
    processResults: function (data) {
      return {
        results: data
      };
    },
    cache: true
  },
  escapeMarkup: function (markup) { return markup; }, 
  minimumInputLength: 1,
  templateResult: formatRepo, 
  templateSelection: formatRepoSelection 
});
 
 

  
 
 
 
说明：
 
     1.q: params.term 查询参数（params.term表示输入框中内容，q发生到服务器的参数名；所以这里你可以添加自定义参数，如：stype:'person'）
 
     2.processResults中results: data返回数据（返回最终数据给results，如果我的数据在data.res下，则返回data.res。这个与服务器返回json有关）
 
     3.minimumInputLength 最小需要输入多少个字符才进行查询，与之相关的maximumSelectionLength表示最大输入限制。
 
     4.escapeMarkup字符转义处理
 
     5.templateResult返回结果回调function formatRepo(repo){return repo.text},这样就可以将返回结果的的text显示到下拉框里，当然你可以return repo.text+"1";等
 
     6.templateSelection选中项回调function formatRepoSelection(repo){return repo.text}
 
     7.关于返回的 json的格式：select2默认json格式为[{id:1,text:'text'},{id:2,text:'text'}]，新版严格要求这样的格式，当然你可以添加列，如：[{id:1,text:'text',name:'liu'}]
 
五.获取选中项
 
 
 

  
 
 
 
var res=$("#c01-select").select2("data")[0] ; //单选
var reslist=$("#c01-select").select2("data");    //多选
if(res==undefined)
{
     alert("你没有选中任何项");
}
if(reslist.length)
{
     alert("你选中任何项");
}
 
 

  
 
 
 
六.清空选择项和设置不可用
 
 
 

  
 
 
 
//清空选择
$("#c01-select").val(null).trigger("change");
$("#c01-select").val("你的placeholder").trigger("change");//或者
//如果你使用的是input标签（默认就是本地数据），你可以用$("#c01-select").val('');来清空选项
 
 
//disabled
$("#c01-select").prop("disabled", false);//可用
$("#c01-select").prop("disabled", true);//不可用
 
 

  
 
 
 
七.启用多选
 
 
 
$("#c01-select").select2({
  data:data,
  multiple: true
});
 
 
多选演示：
 
 
 

 
 
 
由于博客系统原因只能演示选择
 
八.下面简单说明新版与老版对比
 
1.结果回调和选中回调名称：formatResult、formatSelection（老版）；templateResult、templateSelection（新版）
 
2.初始化：
 
 
 

  
 
 
 
//老版，注意如果初始化时文本框中本身没有值（为空），则不会触发该方法
initSelection: function (element, callback) {
   var id = $(element).val();
   var data = { id: id, text: id};//这里是初始化的数据，你可以通过id来从服务器上获取（ajax），再装载进去
   callback(data);
}
 
 

  
 
 
 
 
 
//新版，直接给select添加option
$("#id").append(new Option("Jquery", 10001, false, true));
//或者
$("#id").append("<option value='10001'>Jquery</option>");
 
 
3.获取或设置值：select2("val")（老版）；$("select").val()（新版）
 
推荐使用
 
 
 
var res = $("#id").select2("data");
//返回数组，单选就取res[0]；好处是不进可以获取id、text还可以获取其他属性，如res[0].names
 
 
4.停用或启用：$("select").enable(false);（老版）；$("select").prop("disabled", true);（新版）
 
5.主题样式：新版的样式已经更新，但如果想使用老版样式则可以设置 theme: "classic"
 
 
 
 
Select2控件介绍
 
 
这个插件是基于Select的扩展插件，能够提供更加丰富的功能和用户体验，它的github官网地址为:https://select2.github.io/，具体的使用案例，可以参考地址：https://select2.github.io/examples.html。
 
我们在整个框架里面，用到了很多Select2控件来处理内容的显示，包括单选的下拉列表（包括级联选择框）、复选的下拉列表、树形下拉列表等方式，界面效果如下所示。
 
1）编辑界面下的省份、城市、所在行政区的级联界面效果，选择省份，会加载对应省份下的城市，选择城市，会继续加载城市下的行政区，从而实现多级关联的下拉列表效果。
 
 
 
2）编辑界面下的多项选择下拉列表
 
 
但我们选择其中的内容的时候，系统自动显示出没有选择的列表数据，非常直观友好，如下所示。
 
 
 
3）树形列表的下拉列表
 
有时候，我们的一些数据可能有层次关系的，如所属机构、上层列表等等。
 
 
 
 
2、Select2控件的实际使用代码分析
 
1）基础界面代码及操作
 
使用select2控件，一般是在常规的select控件上，设置一下即可（设置它的class为select2）。
 
 
 

  
 
 
 
 <div class="col-md-6">
    <div class="form-group">
        <label class="control-label col-md-4">重要级别</label>
        <div class="col-md-8">
            <select id="Importance" name="Importance" class="form-control select2" placeholder="重要级别..."></select>
        </div>
    </div>
</div>
 <div class="col-md-6">
    <div class="form-group">
        <label class="control-label col-md-4">认可程度</label>
        <div class="col-md-8">
            <select id="Recognition" name="Recognition" class="form-control select2" placeholder="认可程度..."></select>
        </div>
    </div>
</div>
 
 

  
 
 
 
如果是固定列表，那么也就是设置它的Option内容即可，如下所示。
 
 
 

  
 
 
 
 <div class="col-md-6">
    <div class="form-group">
        <label class="control-label col-md-4">吸烟</label>
        <div class="col-md-8">
            <select id="Smoking" name="Smoking" type="text" class="form-control select2" placeholder="吸烟...">
                <option>吸烟</option>
                <option>不吸烟</option>
            </select>
        </div>
    </div>
</div>
 
 

  
 
 
 
简单的select2控件初始化代码如下所示。
 
 
 
$(document).ready(function() {
  $(".js-example-basic-single").select2();
});
 
 
一般情况下，如果允许复选多个项目，那么设置 multiple="multiple"即可，如下代码所示。
 
 
 
 <select id="ResponseDemand" name="ResponseDemand" multiple="multiple" class="form-control select2"></select>
 
 
2）异步数据绑定操作
 
一般情况下，我们的select控件的数据，是从数据库里面动态加载的，因此一般是通过Ajax方式获取数据并进行绑定即可。
 
基于代码可重用性的考虑，我们编写一个公用的JS函数，用来减少绑定操作的代码，提高代码重用性。
 
 
 

  
 
 
 
//绑定字典内容到指定的Select控件
function BindSelect(ctrlName, url) {
    var control = $('#' + ctrlName);
    //设置Select2的处理
    control.select2({
        allowClear: true,
        formatResult: formatResult,
        formatSelection: formatSelection,
        escapeMarkup: function (m) {
            return m;
        }
    });

    //绑定Ajax的内容
    $.getJSON(url, function (data) {
        control.empty();//清空下拉框
        $.each(data, function (i, item) {
            control.append("<option value='" + item.Value + "'>&nbsp;" + item.Text + "</option>");
        });
    });
}
 
 

  
 
 
 
这样，绑定公用字典模块的数据，也就可以通过下面进一步封装处理即可。
 
 
 
//绑定字典内容到指定的控件
function BindDictItem(ctrlName, dictTypeName) {
    var url = '/DictData/GetDictJson?dictTypeName=' + encodeURI(dictTypeName);
    BindSelect(ctrlName, url);
}
 
 
这样我们初始化Select2 控件，并动态绑定对应的字典值或者其他数据，则可以通过下面初始化代码即可实现。其中BindDictItem就是直接绑定字典内容的操作，BindSelect则是根据URL进行数据的获取并绑定，而$("#Province").on("change", function (e) {});这样的函数处理，就是处理选择内容变化的联动操作了。
 
 
 

  
 
 
 
        //初始化字典信息（下拉列表）
        function InitDictItem() {
            //部分赋值参考            
            BindDictItem("Area","市场分区");
            BindDictItem("Industry", "客户行业");
            BindDictItem("Grade","客户级别");
            BindDictItem("CustomerType", "客户类型");
            BindDictItem("Source", "客户来源");
            BindDictItem("CreditStatus", "信用等级");
            BindDictItem("Stage","客户阶段");
            BindDictItem("Status", "客户状态");
            BindDictItem("Importance",  "重要级别");     
            
            // 绑定省份、城市、行政区（联动处理）
            BindSelect("Province", "/Province/GetAllProvinceNameDictJson");
            $("#Province").on("change", function (e) {
                var provinceName = $("#Province").val();
                BindSelect("City", "/City/GetCitysByProvinceNameDictJson?provinceName="+ provinceName);
            });

            $("#City").on("change", function (e) {
                var cityName = $("#City").val();
                BindSelect("District", "/District/GetDistrictByCityNameDictJson?cityName="+ cityName);
            });
        }
 
 

  
 
 
 
而其中MVC控制器返回的数据，我们是返回一个JSON数据列表给前端页面的，他们的数据格式如下所示。
 
 
 
[ { "Text": "", "Value": "" }, { "Text": "学术会议", "Value": "学术会议" }, { "Text": "朋友介绍", "Value": "朋友介绍" }, { "Text": "广告媒体", "Value": "广告媒体" } ]
 
 
这样前端页面绑定Select2控件的时候，就使用了JSON对象的属性即可。
 
 
 

  
 
 
 
    //绑定Ajax的内容
    $.getJSON(url, function (data) {
        control.empty();//清空下拉框
        $.each(data, function (i, item) {
            control.append("<option value='" + item.Value + "'>&nbsp;" + item.Text + "</option>");
        });
    });
 
 

  
 
 
 
控制器的实现代码如下：
 
 
 

  
 
 
 
        /// <summary>
        /// 根据字典类型获取对应的字典数据，方便UI控件的绑定
        /// </summary>
        /// <param name="dictTypeName">字典类型名称</param>
        /// <returns></returns>
        public ActionResult GetDictJson(string dictTypeName)
        {
            List<CListItem> treeList = new List<CListItem>();
            CListItem pNode = new CListItem("", "");
            treeList.Insert(0, pNode);

            Dictionary<string, string> dict = BLLFactory<DictData>.Instance.GetDictByDictType(dictTypeName);
            foreach (string key in dict.Keys)
            {
                treeList.Add(new CListItem(key, dict[key]));
            }
            return ToJsonContent(treeList);
        }
 
 

  
 
 
 
3）树形列表的绑定操作
 
对于属性列表，如所属公司、所属部门机构等有层次性的数据，它的绑定操作也是类似的，如下代码所示。
 
 
 

  
 
 
 
            //绑定添加界面的公司、部门、直属经理
            BindSelect("Company_ID", "/User/GetMyCompanyDictJson?userId="+@Session["UserId"]);
            $("#Company_ID").on("change", function (e) {
                var companyid = $("#Company_ID").val();
                BindSelect("Dept_ID", "/User/GetDeptDictJson?parentId="+ companyid);
            });
            $("#Dept_ID").on("change", function (e) {
                var deptid = $("#Dept_ID").val();
                BindSelect("PID", "/User/GetUserDictJson?deptId="+ deptid);
            });
 
 

  
 
 
 
只是它们返回的数据，我们把它作为有缩进的显示内容而已。
 
 
 
[ { "Text": "爱奇迪集团", "Value": "1" }, { "Text": " 广州分公司", "Value": "3" }, { "Text": " 上海分公司", "Value": "4" }, { "Text": " 北京分公司", "Value": "5" } ]
 
 
或者如下所示
 
 
 
[ { "Text": "广州分公司", "Value": "3" }, { "Text": "总经办", "Value": "6" }, { "Text": "财务部", "Value": "7" }, { "Text": "工程部", "Value": "8" }, { "Text": "产品研发部", "Value": "9" }, { "Text": "　　开发一组", "Value": "14" }, { "Text": "　　开发二组", "Value": "15" }, { "Text": "　　测试组", "Value": "16" }, { "Text": "市场部", "Value": "10" }, { "Text": "　　市场一部", "Value": "23" }, { "Text": "　　市场二部", "Value": "24" }, { "Text": "综合部", "Value": "11" }, { "Text": "生产部", "Value": "12" }, { "Text": "人力资源部", "Value": "13" } ]
 
 
综上两个部分，我们可以看到它们的Text的内容，是根据层次关系进行空格增加，从而实现了层次关系的显示。
 
 
不过从这个界面效果上讲，这样的处理确实没有EasyUI里面，对下拉列表树的展示好看，也许可以利用更好的Bootstrap插件进行这个树形内容的展示。
 
  
 
4）select2控件的赋值处理
 
上面介绍的方法，都是介绍select2控件的初始化，绑定相关的数据，那么如果初始化界面后，我们绑定编辑界面的值的时候，就需要赋值给控件，让它显示真正需要显示的项目了。
 
如清空控件的方法如下所示。
 
 
 
            //清空Select2控件的值
            $("#PID").select2("val", "");
            $("#Company_ID").select2("val", "");
            $("#Dept_ID").select2("val", "");
 
 
如果对于多个控件，需要清除，则可以使用集合进行处理
 
 
 
            var select2Ctrl = ["Area","Industry","Grade","CustomerType","Source","CreditStatus","Stage","Status","Importance"];
            $.each(select2Ctrl, function (i, item) {
                var ctrl = $("#" + item);
                ctrl.select2("val", "");
            });
 
 
给Select2 控件赋值，让它显示对应值内容的项目，那么操作也就和上面的类似了。
 
 
 
                 $("#CustomerType").select2("val", info.CustomerType);
                 $("#Grade").select2("val", info.Grade);
                 $("#CreditStatus").select2("val", info.CreditStatus);
                 $("#Importance").select2("val", info.Importance);
                 $("#IsPublic").select2("val", info.IsPublic);
 
 
如果需要级联显示的，那么做法增加一个onchange的函数处理就可以了，如下级联代码的赋值处理如下。
 
 
 

  
 
 
 
 $("#Province").select2("val", info.Province);
 $("#Province").trigger('change');//联动
 $("#City").select2("val", info.City);
 $("#City").trigger('change');//联动
 $("#District").select2("val", info.District);
 
$("#Company_ID1").select2("val", info.Company_ID);
$("#Company_ID1").trigger('change');
$("#Dept_ID1").select2("val", info.Dept_ID);
$("#Dept_ID1").trigger('change');
$("#PID1").select2("val", info.PID);
 
 

  
 
 
 
 
多个列表项目数据的绑定。
 
我们从案例里面可以看到，Select2支持多项值的选择，它们保存后会以逗号分开，如果我们需要在编辑的时候显示存储的多个记录，那么需要把字符串转换为数组列表才能进行正确绑定，如下所示。
 
 
 
$("#Permission").select2("val", info.Permission.split(','));
 
 
 
 
 
最后来两个整体性的界面效果，供参考。
 
 
 
 
 

点关注，不迷路
 
文章每周持续更新，可以微信搜索「 十分钟学编程 」第一时间阅读和催更，如果这个文章写得还不错，觉得有点东西的话 ~求点赞👍 求关注❤️ 求分享❤️ 
 各位的支持和认可，就是我创作的最大动力，我们下篇文章见！
 

select2设置select多选，select2取值和赋值,作为筛选条件的时候，取值相对简单，把选中的id值转为字符串传给后端查询，查询之后会刷新页面，为了在下拉框中显示刚刚选中的值，就需要给select赋值，可以将刚才传给后端的字符串再传回前端，然后转为一位数组，再赋值给select2就会显示刚刚选中的值，赋值方法：$('#id').val(arr).trigger('change')，id为select的id属性，这里的arr是刚才从后端传回前端的id转成的一位数组。
 
select2设置select多选，select2取值和赋值,首先需要引入select2的js文件，select2官网地址：https://select2.org/
 
//select2html代码设置选项，list为后端查询出来的选项，循环赋值
 
 <select name="id" id="id" multiple="multiple">
        <option value="0">请选择部门</option>
        <volist name="list" id="vo">
            <option value="{$vo.id}" <eq name="vo.id" value="$id">selected = "selected"                </eq>>{$vo.name}</option>
        </volist>
    </select>
 

     //可以另外设置一个隐藏的input框来存select选中的id，方便传给后端
 
 <input type="hidden" id="select_id" name="select_id"/>
 
//select2插件初始化
 
  $("#id").select2({
        language : "zh-CN",
        minimumInputLength : 0,
        placeholder:"可多选",//默认值
        allowClear: true,
    })
 

     //select2插件赋值 
 
 var select_id = $("#select_id").val();
    arr = select_id.split(",");//注意：arr为select的id值组成的数组
    $('#id').val(arr).trigger('change');
 

     //select2多选，取值，在下拉框中选中以后，获取到选择的id值
 
 $('#id').change(function(){
            var o=document.getElementById('id').getElementsByTagName('option');
            var all="";
            console.log(o[1]);
            for(var i=0;i<o.length;i++){
                if(o[i].selected){
                    all+=o[i].value+",";
                }
            }
            
            all = all.substr(0, all.length - 1);//去掉末尾的逗号
            $("#bumen").val(all);//赋值给隐藏的文本框
        })
 
select2设置select多选，select2取值和赋值大概就这些了，也是网上找了很多资料，尝试了很多次，因为刚开始不知道$('#id').val(arr).trigger('change');里面的arr是个啥，最开始以为是数据，text，赋值了一些字符串，所以一直没用。
 
 
 
阿里云学生机(24岁以下自动获得学生身份)优惠地址，服务器购买，各种云服务购买：https://promotion.aliyun.com/ntms/act/campus2018.html?userCode=cyn41gba
 
腾讯云双十一优惠：
https://cloud.tencent.com/act/cps/redirect?redirect=1048&cps_key=1f197f58b18ff5752c34467efca408fc&from=console

小伙伴想精准查找自己想看的MySQL文章？喏 → MySQL专栏目录 | 点击这里
 
 
 
SQL 查询的执行顺序是怎样的？
 
 
好像这个问题应该很好回答，毕竟自己已经写了无数个 SQL 查询了，有一些还很复杂的。还装不了这个逼了？！
 
 
但事实是，我仍然很难确切地说出它的顺序是怎样的。
 
 
言归正传，SELECT语句的完整语法如下：
 
1. SELECT 
2. DISTINCT <select_list>
3. FROM <left_table>
4. <join_type> JOIN <right_table>
5. ON <join_condition>
6. WHERE <where_condition>
7. GROUP BY <group_by_list>
8. HAVING <having_condition>
9. ORDER BY <order_by_condition>
10.LIMIT <limit_number>
 
 
 
 
 
然而其执行顺序却是：
 
 
 
FROM
 <表名> # 笛卡尔积
ON
 <筛选条件> # 对笛卡尔积的虚表进行筛选
JOIN <join, left join, right join...> 
 <join表> # 指定join，用于添加数据到on之后的虚表中，例如left join会将左表的剩余数据添加到虚表中
WHERE
 <where条件> # 对上述虚表进行筛选
GROUP BY
 <分组条件> # 分组
 <SUM()等聚合函数> # 用于having子句进行判断，在书写上这类聚合函数是写在having判断里面的
HAVING
 <分组筛选> # 对分组后的结果进行聚合筛选
SELECT
 <返回数据列表> # 返回的单列必须在group by子句中，聚合函数除外
DISTINCT
 # 数据除重
ORDER BY
 <排序条件> # 排序
LIMIT
 <行数限制>
 
 
其实，引擎在执行上述每一步时，都会在内存中形成一张虚拟表，然后对虚拟表进行后续操作，并释放没用的虚拟表的内存，以此类推。
具体解释：（注：下面“VT”表示 → 虚拟表 virtual ）
 
 from：select * from table_1, table_2; 与 select * from table_1 join table_2; 的结果一致，都是表示求笛卡尔积；用于直接计算两个表笛卡尔积，得到虚拟表VT1，这是所有select语句最先执行的操作，其他操作时在这个表上进行的，也就是from操作所完成的内容
on: 从VT1表中筛选符合条件的数据，形成VT2表；
join: 将该 join 类型的数据补充到VT2表中，例如 left join 会将左表的剩余数据添加到虚表VT2中，形成VT3表；若表的数量大于2，则会重复1-3步；
where: 执行筛选，（不能使用聚合函数）得到VT4表；
group by: 对VT4表进行分组，得到VT5表；其后处理的语句，如select，having，所用到的列必须包含在group by条件中，没有出现的需要用聚合函数；
having: 筛选分组后的数据，得到VT6表；
select: 返回列得到VT7表；
distinct: 用于去重得到VT8表；
order by: 用于排序得到VT9表；
limit: 返回需要的行数，得到VT10；
 
 
需要注意的是：
 
 
group by条件中，每个列必须是有效列，不能是聚合函数；
null值也会作为一个分组返回；
除了聚合函数，select子句中的列必须在group by条件中；
 

上述内容让我们知道一个查询会返回什么，同时，也回答了以下这些问题：
 
可以在 GRROUP BY 之后使用 WHERE 吗？（不行，GROUP BY 是在 WHERE 之后！）
可以对窗口函数返回的结果进行过滤吗？（不行，窗口函数是 SELECT 语句里，而 SELECT 是在 WHERE 和 GROUP BY 之后）
可以基于 GROUP BY 里的东西进行 ORDER BY 吗？（可以，ORDER BY 基本上是在最后执行的，所以可以基于任何东西进行 ORDER BY）
LIMIT 是在什么时候执行？（在最后！）
但是，数据库引擎并不一定严格按照这个顺序执行 SQL 查询，因为为了更快地执行查询，它们会做出一些优化，这些问题会在下方进行解释↓↓↓。
 

 SQL中的别名会影响SQL执行顺序么？
 
如下方SQL所示：
 
SELECT CONCAT(first_name, ' ', last_name) AS full_name, count(*)
FROM table
GROUP BY full_name
 
从这个语句来看，好像 GROUP BY 是在 SELECT 之后执行的，因为它引用了 SELECT 中的一个别名。但实际上不一定要这样，数据库引擎会把查询重写成这样↓↓↓：
 
SELECT CONCAT(first_name, ' ', last_name) AS full_name, count(*)
FROM table
GROUP BY CONCAT(first_name, ' ', last_name)
 
所以，这样 GROUP BY 仍然先执行。
 
另外，数据库引擎还会做一系列检查，确保 SELECT 和 GROUP BY 中的东西是有效的，所以会在生成执行计划之前对查询做一次整体检查。
 
 
 
数据库很可能不按正常顺序执行查询（优化）
 

 在实际当中，数据库不一定会按照 JOIN、WHERE、GROUP BY 的顺序来执行查询，因为它们会进行一系列优化，把执行顺序打乱，从而让查询执行得更快，只要不改变查询结果。
 
这个查询说明了为什么需要以不同的顺序执行查询：
 
SELECT * FROM
dept d LEFT JOIN student s ON d.student_id = s.id
WHERE s.name = '陈哈哈'
 

 如果只需要找出名字叫“陈哈哈”的学生信息，那就没必要对两张表的所有数据执行左连接，在连接之前先进行过滤，这样查询会快得多，而且对于这个查询来说，先执行过滤并不会改变查询结果。
  
 
能看到这里的朋友都是有缘人了，为你的学习力点赞！希望大佬也能为小弟点赞支持一下哦！
 

 
 
v-model的值为当前被选中的el-option的 value 属性值
 
 
<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''  // 选取默认值在里面就可以了，比如：  value:"选项2"；
      }
    }
  }
</script>