精华内容
下载资源
问答
  • 2019-09-16 16:02:42

    Element下拉框自定义搜索方法


    根据官方文档的api,自定义element的select组件输入提示需要配置filter-method(自定义搜索方法)和filterable(是否可搜索),html代码如下:

    <el-select filterable :filter-method="myFilter">
      <el-option v-for='item in copyUserList' :label='item.name' :key='item.id' :value='item.id'></el-option>
    </el-select>
    

    js代码如下:

    method:{
      myFilter(val){
      //val是输入的值
        this.copyUserList = ...... //利用val在userList中匹配,赋值给copyUserList,从而保留初始值
      }
    }
    

    注意,循环生成el-option标签的时候,动态设置key属性一定要仔细,如果key值重复或未设置,当在下拉框中输入字符进行搜索,第一个字符将会消失,但可以成功执行一次myFilter方法,此时控制台不一定会报错.

    更多相关内容
  • 下拉框自定义标签

    2019-03-18 02:19:56
    NULL 博文链接:https://duanfei.iteye.com/blog/675678
  • layui渲染下拉框,设置下拉框,设置验证 <div class="layui-form-item"> <label for="department_id" class="layui-form-label"> <span class="x-red">*</span>部门 </label&...

    layui渲染下拉框,设置下拉框,设置验证

     <div class="layui-form-item">
                    	 <label for="department_id" class="layui-form-label">
                            <span class="x-red">*</span>部门
                        </label>
                        <div class="layui-input-block">
                            <select name="department_id" id="department_id" lay-filter="department_id" required  lay-verify="required">
                            	<option value="">--</option>
                            	<c:forEach items="${department_li }" var="item">
                            	<option value="${item.did }" <c:if test="${s.department_id eq item.did}">selected </c:if>  >${item.dname }</option>
                            	</c:forEach>
                            </select>
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                    	 <label for="professional" class="layui-form-label">
                            <span class="x-red">*</span>科室
                        </label>
                        <div class="layui-input-block">
                            <select name="chamber_id" id="chamber_id" lay-filter="chamber_id" required  lay-verify="required">
                           		<option value="">--</option>
                            </select>
                        </div> 
                    </div>
    <div class="layui-form-item">
    	                <button class="layui-btn" type="submit" lay-submit lay-filter="formDemo">保存</button>
    	                <button class="layui-btn" type="reset">重置</button>
    	             </div>
    
    

    关键代码:设置需要渲染的下拉框,用 lay-filter
    id=“department_id” lay-filter=“department_id”

    js代码如下:

    layui.use(['form','layer'], function(){
            	  var form = layui.form;
            	  
            	  //监听提交
            	  form.on('submit(formDemo)', function(data){
            	    return true;
            	  });
            	  
            	  getChamber($('#department_id').val());  
              	form.on('select(department_id)', function(data){
                  	var department_id=(data.value);
                  	getChamber(department_id);
              	});
    
              	
              	function getChamber(department_id){
              		$("#chamber_id").html("");
              		 form.render('select');
              		if($.trim(department_id).length==0)return;
                 		 $.ajax({
                	                type: 'POST',
                	               url : "${ctx}/chamber/selectByDid",
    	  			    			data : {
    	  			    				department_id : department_id
    	  			    			},
                	                dataType:  'json',
                	                success: function(data){
      	           	                $.each(data, function(key, val) {
      	           								var option1 = $("<option>").val(val.cid).text(val.cname);
      	           								if("${s.chamber_id}"==val.cid)$(option1).attr('selected','selected');
      	           	                   			
      	           	                   			$("#chamber_id").append(option1);
      	           	                            form.render('select');
      	           	                 }); 
                	                }
                	       }); 
                  } 
            	});
    

    Layui 监听 select 获取自定义属性值

    form.on('select(doctor_id)', function(data){
                	var f= $(data.elem).find("option:selected").attr("data-f");
                	$('#money').val(f); 
                	 
            	}); 
    
    展开全文
  • jq封装插件可以获得value值,有回调方法
  • el-select下拉框自定义内容添加多选框以及图片等。 需求介绍 在下拉框中添加多选的按钮以及头像等等。 // An highlighted block <template> <div class="selectCheckbox"> <div @click=...

    el-select下拉框自定义内容添加多选框以及图片等。

    需求介绍

    在这里插入图片描述
    在下拉框中添加多选的按钮以及头像等等。

    // An highlighted block
    <template>
      <div class="selectCheckbox">
        <div @click="selectNone" class="select-header">
          识人
          <div class="select-box" v-show="selectboxIsshow">
            <el-select v-model="value" placeholder="请输入" multiple>
              <el-checkbox-group v-model="checkList" @change="checkboxClick">
                <el-option :label="item.label" :value="item.value" v-for="item in options" :key="item.value">
                  <div style="display:flex;align-items: center;">
                    <div @click.stop>
                      <el-checkbox :label="item.value" style="display:flex;align-items: center;"
                        ><img src="../assets/default-avatar.png" style="width:30px;height:30px;margin-right:20px"
                      /></el-checkbox>
                    </div>
                    <div>{{ item.label }}</div>
                  </div>
                </el-option>
              </el-checkbox-group>
            </el-select>
          </div>
        </div>
        <div class="footer">content</div>
      </div>
    </template>
    
      methods: {
        checkboxClick(item) {
          this.value = item
        },
        selectNone() {
          this.selectboxIsshow = !this.selectboxIsshow
        },
      },
    

    这里使用双向绑定数据即可,页面会自动加载。
    效果如下:
    在这里插入图片描述
    还有就是在点击多选框的时候实际上会触发el-select本身的点击事件,这里用了@click.stop阻止冒泡即可。

    参考博主博客地址:https://blog.csdn.net/zwd862375698/article/details/116936144?spm=1001.2014.3001.5501

    展开全文
  • android 自定义下拉框

    2021-06-03 17:02:36
    场景:自定义下拉框兑现(android)自定义下拉框实现(android)说道android下拉框spineer,框架中虽有现成的控件,但实际效果可能并不是我们所需要的那种,如下图:其实我们更需要的是像WEB那种风格,如图所示:其实...

    场景:自定义下拉框兑现(android)

    自定义下拉框实现(android)

    说道android下拉框spineer,框架中虽有现成的控件,但实际效果可能并不是我们所需要的那种,如下图:

    10021430.gif

    其实我们更需要的是像WEB那种风格,如图所示:

    10021431.png

    其实实现也很简单,就是自定义个popwindow就可以了

    下面贴上代码片段:

    public class SpinerPopWindow extends PopupWindow implements OnItemClickListener{

    private Context mContext;

    private ListView mListView;

    private NormalSpinerAdapter mAdapter;

    private IOnItemSelectListener mItemSelectListener;

    public SpinerPopWindow(Context context)

    {

    super(context);

    mContext = context;

    init();

    }

    public void setItemListener(IOnItemSelectListener listener){

    mItemSelectListener = listener;

    }

    private void init()

    {

    View view = LayoutInflater.from(mContext).inflate(R.layout.spiner_window_layout, null);

    setContentView(view);

    setWidth(LayoutParams.WRAP_CONTENT);

    setHeight(LayoutParams.WRAP_CONTENT);

    setFocusable(true);

    ColorDrawable dw = new ColorDrawable(0x00);

    setBackgroundDrawable(dw);

    mListView = (ListView) view.findViewById(R.id.listview);

    mAdapter = new NormalSpinerAdapter(mContext);

    mListView.setAdapter(mAdapter);

    mListView.setOnItemClickListener(this);

    }

    public void refreshData(List list, int selIndex)

    {

    if (list != null && selIndex != -1)

    {

    mAdapter.refreshData(list, selIndex);

    }

    }

    @Override

    public void onItemClick(AdapterView> arg0, View view, int pos, long arg3) {

    dismiss();

    if (mItemSelectListener != null){

    mItemSelectListener.onItemClick(pos);

    }

    }

    }主界面调用代码:

    public class SpinerWindowDemoActivity extends Activity implements OnClickListener, AbstractSpinerAdapter.IOnItemSelectListener{

    /** Called when the activity is first created. */

    private View mRootView;

    private TextView mTView;

    private ImageButton mBtnDropDown;

    private List nameList = new ArrayList();

    @Override

    public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.main);

    setupViews();

    }

    private void setupViews(){

    mRootView = findViewById(R.id.rootView);

    mTView = (TextView) findViewById(R.id.tv_value);

    mBtnDropDown = (ImageButton) findViewById(R.id.bt_dropdown);

    mBtnDropDown.setOnClickListener(this);

    String[] names = getResources().getStringArray(R.array.hero_name);

    for(int i = 0; i < names.length; i++){

    nameList.add(names[i]);

    }

    mSpinerPopWindow = new SpinerPopWindow(this);

    mSpinerPopWindow.refreshData(nameList, 0);

    mSpinerPopWindow.setItemListener(this);

    }

    @Override

    public void onClick(View view) {

    switch(view.getId()){

    case R.id.bt_dropdown:

    showSpinWindow();

    break;

    }

    }

    private void setHero(int pos){

    if (pos >= 0 && pos <= nameList.size()){

    String value = nameList.get(pos);

    mTView.setText(value);

    }

    }

    private SpinerPopWindow mSpinerPopWindow;

    private void showSpinWindow(){

    Log.e("", "showSpinWindow");

    mSpinerPopWindow.setWidth(mTView.getWidth());

    mSpinerPopWindow.showAsDropDown(mTView);

    }

    @Override

    public void onItemClick(int pos) {

    setHero(pos);

    }

    }

    就这么简单,具体UI美化大家再修改下xml就可以了

    下面附上工程链接:

    http://download.csdn.net/detail/geniuseoe2012/5184664

    more brilliant,Please pay attention to my CSDN blog -->http://blog.csdn.net/geniuseoe2012

    展开全文
  • 自定义Select下拉框

    千次阅读 2019-05-23 01:02:56
    背景 经常写Web页面的同学...下拉框的点击按钮要使用自定义的图标 … 若是没有相关经验,拿到这种诉求可能头都要爆炸,不过当我们有过相关经验以后就会发现还真可以这么实现,而且自己做出来的Select既好玩又好看...
  • Vue+elementUI下拉框自定义颜色选择器定义子组件父组件引入引入组件声明组件页面使用 定义子组件 <template> <div> <el-select ref="colorSelect" placeholder="" clearable v-model="myColor" ...
  • Android实现仿QQ登录可编辑下拉框 自定义spinner.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
  • Android自定义下拉框,用PopupWindow实现
  • 自定义elementUI select下拉框样式

    千次阅读 2021-04-23 16:39:31
    无论加important还是deep ,发现怎样也改不了下拉框的样式,点击元素发现下拉框与script标签是同级的(看下图) 官方文档上写加 :popper-append-to-body=‘false’ ,再修改样式,但对我好像没有用 官方文档上写...
  • 自定义下拉框

    2017-03-24 17:34:18
    在div中,传入class使用,input-select,下拉箭头自定义,默认值根据input中的value设置
  • 组件自定义 props props传入数据。 $emit this.$emit(“input”,param);...下拉框实现代码 /* 自定义下拉列表组件样式 */ .custom-select-box{ min-height: 30px; width: 100%; position: relative; } .custom-sel
  • v-close放在点击不关闭下拉框的标签上 "search-bar-package search_bar-package" v-close> "div_form"> "opt"> 专业 "../assets/images/sanjiao.png" alt @click="showopt" /> "div_form_search" type="search" ...
  • element 下拉框加一个自定义选项

    千次阅读 2020-01-09 17:10:15
    <el-select v-model="value" clearable placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value"> </...
  • layui获取下拉框自定义的值

    千次阅读 2019-04-29 11:29:14
    ... // 得到自定义的值 // var score = $(data.elem).find("option:selected").attr("data-score"); var score = $(data.elem).find("option:selected").data("score"); });
  • 样式展示: //在下拉框中的每一个item项的右侧添加按钮或其他的样式 // option中的遍历的每一项,必须添加这个 {{ item.label }} //每一个item项右侧要显示的内容 {{ selfName }} // 下拉框自定义下拉框中底部的...
  • el-select 下拉框自定义背景颜色

    千次阅读 2021-12-29 10:49:10
    需求:根据后端返回的颜色值,渲染不同的背景颜色 实现效果: <el-select style="width: auto; max-width: none" v-model="sourceId" clearable :placeholder="$t('NeoLight.select')" ...
  •  <title>select美化自定义下拉框样式 - 站长素材      /* 公共样式 */    * {  padding: 0;  margin: 0;  list-style: none;  font-size: 14px;  }    .hide {  display: none;  }  ...
  • ASP.NET多选下拉框自定义控件

    热门讨论 2010-08-27 02:09:42
    ASP.NET多选下拉框自定义控件,采用Ajax方式多选下拉框
  • 主要介绍了Vue中el-form标签中的自定义el-select下拉框标签功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • html中默认的select太丑了,使用jquery+html自定义下拉框。样式随心所欲。
  • Qt Quick自定义下拉框

    2017-03-31 16:31:23
    Qt Quick自定义下拉框Combobox
  • 自定义下拉框 预览:https://blog.csdn.net/SangHongxv/article/details/81746014
  • c#自定义下拉框

    2021-12-27 15:39:49
    DataTable dt = new DataTable(); dt.Columns.Add("jbmc"); dt.Columns.Add("jbbm"); DataRow dr = dt.NewRow(); dr[0] = “感冒”; dr[1] = “A23”; dt.Rows.Add(dr);... BoxJbbz.ValueMem..
  • Spinner下拉框在android中有2种绑定方式1.通过在string.xml中配置 array 的item 去实现(缺点:下拉框中的内容是写死的)北京上海广州深圳在布局文件中引用后可以看到效果android:id="@+id/tab1_fragemt_spinner1...
  • C#自定义ComboBox下拉框

    2018-12-25 20:42:28
    这个是从国外网站直接下载的自定义ComboBox下拉框,支持下拉列表中带复选框,下来列表多列列表。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,353
精华内容 14,541
关键字:

下拉框自定义其他

友情链接: MaNGOS-master.zip