精华内容
下载资源
问答
  • el-select
    2022-04-01 15:42:21

    原文链接

    el-select选择框也有多选功能,但是没有全选。故需要改造一下,el-select 结合 el-checkBox 实现下拉全选+多选功能。

    在这里插入图片描述

    代码如下,可直接复制使用:

    <!--
     * @Description: el-select 结合 el-checkBox 实现下拉全选+多选功能
    -->
    <template>
      <div style="padding: 300px 100px;">
        <el-select v-model="menus" multiple collapse-tags @change="changeSelectMenu" placeholder="请选择菜单" clearable>
          <el-checkbox v-model="checkedAll" @change="selectAll">全选</el-checkbox>
          <el-option v-for="item in menuList" :key="item.id" :label="item.menuName" :value="item.id"></el-option>
        </el-select>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          checkedAll: false,
          menus: [],
          menuList: [
            { id: '01', menuName: '菜单一' },
            { id: '02', menuName: '菜单二' },
            { id: '03', menuName: '菜单三' },
            { id: '04', menuName: '菜单四' },
            { id: '05', menuName: '菜单五' },
            { id: '06', menuName: '菜单六' },
          ]
        }
      },
      mounted () {
    
      },
      methods: {
        // 点击下拉列表选项时触发
        changeSelectMenu (val) {
          if (val.length === this.menuList.length) {
            this.checkedAll = true
          } else {
            this.checkedAll = false
          }
        },
        // 点击“全选”按钮时触发
        selectAll () {
          this.menus = []
          if (this.checkedAll) {
            this.menuList.map(item => {
              this.menus.push(item.id)
            })
          } else {
            this.menus = []
          }
        }
      }
    }
    </script>
    <style lang='less'>
    .el-select-dropdown {
      .el-checkbox {
        display: inline-block;
        margin-left: 20px;
        padding: 8px 0;
      }
    }
    </style>
    
    更多相关内容
  • npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui,则需要引入一个单独的element-ui包,如下所示: import 'el-select-tree/lib/element-ui' ; 全球注册 import Vue from 'vue' ; ...
  • el-tree-select-master.zip,el-tree-select-master,public,index.html,assets,el-select-tree.gif,el-select.png,src,main.js,components,treeSelect.vue,App.vue,README.md,.gitignore,package-lock.json,package....
  • 主要介绍了Vue中el-form标签中的自定义el-select下拉框标签功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • el-select数据过多处理方式 在日常项目中el-select组件的使用频率是非常之高的. 当数据过多时渲染时间非常长, 这里提供几个处理方式. 远程搜索 组件提供了远程搜索方式, 也就是按照你输入... v-el-select-loadmore=lo
  • 2、修改.el-select-dropdown__item的样式 3、通过官网提供的popper-class进行样式修改 然而,上面的方法并没有说到点子上,覆盖全局样式的方法肯定不友好,修改样式和添加类也都不起作用。于是,我看了下下拉框的...
  • 这是一个项目中常见的需求,el-select 为下拉多选,默认值不可删除,或者指定值不可删除。 实现效果: el-select 如下源码中 tag closable 属性为 el-select 的 disabled 属性,所有明显不支持。 解决思路(从el-...
  • 主要介绍了el-select 下拉框多选实现全选的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 在项目中发现使用el-select时写的比较多重复代码,还有就是同一个页面使用el-select会出现label值会显示value值, el-select组件化: <el-select :class="obj&&keyword[keywordAttr.label]? 'selected': ''" ...
  • 主要介绍了详解element-ui中el-select的默认选择项问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • el-select获取选中的label值
  • 主要介绍了Vue + Element-ui的下拉框el-select获取额外参数详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • <el v-model=level size=mini placeholder=请选择 change=selectChange()> <el v-for=item key=item.value label=item.label value=item.value></el> </el> 我们需要的是选择之后才触发,但是这样写你会发现,页面...
  • 主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
  • 由于下拉数据比较多,造成卡顿用户体验极差,所以使用滚动加载的办法提高用户体验 方案一:(局部自定义一个指令) ... let select_dom = el.querySelector('.el-select-dropdown .el-select-dropdown_

    由于下拉数据比较多,造成卡顿用户体验极差,所以使用滚动加载的办法提高用户体验

    方案一:(局部自定义一个指令)

    第一步(创建指令)

    export default {
    	directives: {
    	    loadMore: {
    	      bind(el, binding) {
    	        // 获取element,定义scroll
    	        let select_dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
    	        select_dom.addEventListener('scroll', function () {
    	          let height = this.scrollHeight - this.scrollTop <= this.clientHeight;
    	          if (height) {
    	            binding.value()
    	          }
    	        })
    	      }
    	    }
    	  },
    }
    

    第二步(使用)

    <el-form-item label='所属系统:' prop='instanceId'>
       <el-select 
    	   @keyup.enter.native='searchList' 
    	   v-loadMore="loadMore" 
    	   v-model='search.instanceId' 
    	   placeholder='请选择'
    	>
    		<el-option 
    			v-for='item in selectSysInstanceList' 
    			:label='item.name' 
    			:value='item.id'
                :key='item.id'>
            </el-option>
        </el-select>
    </el-form-item>
    loadMore(){
       if( this.sysInstanceIndex + 1 >= this.sysInstanceTotalPages ) return
       this.sysInstanceIndex ++
       // 获取列表数据的方法
       this.selectSysInstance()
    },
    /**
      * @description 获取所属系统下拉选择列表
      * @author 饺子
      */
    async selectSysInstance() {
      let query = {
        pageIndex: this.sysInstanceIndex,
        pageSize: 10
      }
      const {code, data: {content = [], totalPages}} = await this.$requestFormData(this.$api.selectSysInstance, query, {showLoading: false})
      if(code !== 200) return
      this.sysInstanceTotalPages = totalPages
      this.selectSysInstanceList = [...this.selectSysInstanceList, ...content]
    },
    

    方案二:(全局自定义一个指令)

    第一步:(自定义指令)

    // directive.js (和main.js同级)
    import Vue from 'vue'
    
    // 滚动加载更多
    Vue.directive('loadMore', {
      bind(el, binding) {
        // 获取element,定义scroll
        let select_dom = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
        select_dom.addEventListener('scroll', function () {
          let height = this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (height) {
            binding.value()
          }
        })
      }
    })
    

    第二步:(在main.js导入)

    import './directives'
    

    第三步:(使用)

    同方案一使用

    解决el-select 滚动加载回显问题

    前提:后端得把选中项的label 和 value都返给你
    1、el-select 设置 ref、value-key (我的为:value-key=“id”)
    2、el-option value设置为object 如下(我的格式为: {id, name})
    3、获取到详情信息后设置el-select的v-model的值为 {id, name}
    4、 最后给下拉项设置虚拟值
    this.$refs.select.cachedOptions.push({
     currentLabel: data.instanceId.name,   // 当前绑定的数据的label
     currentValue: data.instanceId,      // 当前绑定数据的value
     label: data.instanceId.name,       // 当前绑定的数据的label
     value: data.instanceId          // 当前绑定数据的value
    })

    <el-form-item label='所属系统权限:' prop='instanceId'>
       <el-select
         style="width: 100%"
         ref="select"
         v-loadMore="loadMore"
         v-model='form.instanceId'
         placeholder='请选择'
         value-key="id"
         @change="val => getSysInstanceMenu(val.id)"
       >
         <el-option
           v-for='item in selectSysInstanceList'
           :label='item.name'
           :value='item'
           :key='item.id'/>
       </el-select>
     </el-form-item>
    
    /**
         * @description 获取角色基础信息
         * @author 饺子
         */
        async getDetailInfo() {
          const {
            code,
            data
          } = await this.$requestFormData(this.$api.getPlatformRoleInfo, {roleId: this.$route.query.roleId})
          if (code !== 200) return
          await this.getSysInstanceMenu(data.instanceId)
          data.roleId = data.id
          data.instanceId = {
            id: data.instanceId,
            name: data.instanceName
          }
          this.$nextTick(() => {
            this.$refs.select.cachedOptions.push({
              currentLabel: data.instanceId.name, // 当前绑定的数据的label
              currentValue: data.instanceId,      // 当前绑定数据的value
              label: data.instanceId.name,        // 当前绑定的数据的label
              value: data.instanceId              // 当前绑定数据的value
            })
            this.checkedMenu = data.menuIdList
            this.form = data
          })
    
    

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 很多人遇到表格中嵌套select的情况,这种时候因为表格很多行,就会有很多个选择器,会出现点一个选择器其他的选择器都选中了同一个角标的值。所以我们要做到区分单独开来。 效果图 拿到的值格式 这样的,直接就放在...

    很多人遇到表格中嵌套select的情况,这种时候因为表格很多行,就会有很多个选择器,会出现点一个选择器其他的选择器都选中了同一个角标的值。所以我们要做到区分单独开来。

    效果图

    在这里插入图片描述

    拿到的值格式

    这样的,直接就放在了tabledata内。
    在这里插入图片描述
    在这里插入图片描述

    代码

    html
    重点!!!!v-model="scope.row[scope.column.property]"这一句话

              <el-table :data="tableData" style="width: 100%" size="mini">
                <el-table-column prop="A" label="名称"> </el-table-column>
                <el-table-column prop="B" label="开始时间"> </el-table-column>
                <el-table-column prop="C" label="结束时间"> </el-table-column>
                <el-table-column prop="D" label="操作区分">
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row[scope.column.property]"
                      placeholder="操作标记"
                      size="mini"
                    >
                      <el-option
                        v-for="(item,index) in options"
                        :key="index"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="E" label="操作分类">
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row[scope.column.property]"
                      placeholder="操作分类"
                      size="mini"
                    >
                      <el-option
                        v-for="(item,index) in options2"
                        :key="index"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column prop="F" label="归类">
                  <template slot-scope="scope">
                    <el-select
                      v-model="scope.row[scope.column.property]"
                      placeholder="归类"
                      size="mini"
                    >
                      <el-option
                        v-for="(item,index) in options3"
                        :key="index"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
              </el-table>
    

    data:
    获取的值会存在对应的tabledata内。如果想反选就直接在tabledata改值就行,比如给D内写值,那么图表上的select就会默认选中

          tableData: [
            {
              A: "作业分析动作1",
              B: "16.44",
              C: "31.29",
              D:'',
              E:'',
              F:''
            },
            {
              A: "作业分析动作2",
              B: "34.24",
              C: "43.11",
              D:'',
              E:'',
              F:''
            },
            {
              A: "作业分析动作3",
              B: "48.64",
              C: "70.26",
              D:'',
              E:'',
              F:''
            },
            {
              A: "作业分析动作4",
              B: "76.15",
              C: "104.25",
              D:'',
              E:'',
              F:''
            },
          ],
    
    展开全文
  • 本文主要记录多选操作 Element-ui官网参考 一、像下面这样直接使用,页面选择下拉列表数据,页面时不会更新的...el-table-column label="select" width="100"> <!-- <template slot-scope="scope"> -->

    本文主要记录多选操作

    Element-ui官网参考

    一、像下面这样直接使用,页面选择下拉列表数据,页面时不会更新的

     <!-- 表格区开始 -->
     <el-table size="mini" :data="tableData" style="width: 98%">
       <el-table-column label="select" width="100">
         <!-- <template slot-scope="scope"> -->
           <el-select
             v-model="value1"
             multiple
             placeholder="请选择"
           >
             <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.label"
               :value="item.value"
             >
             </el-option>
           </el-select>
         <!-- </template> -->
       </el-table-column>
    </el-table>
    <!-- 表格区结束 -->
    

    在这里插入图片描述

    二、将el-select放到el-table中页面不更新问题的解决方案

     <!-- 表格区开始 -->
     <el-table size="mini" :data="tableData" style="width: 98%">
       <el-table-column label="select" width="100">
         <template slot-scope="scope">
           <el-select
             v-model="value1"
             multiple
             placeholder="请选择"
           >
             <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.label"
               :value="item.value"
             >
             </el-option>
           </el-select>
         </template>
       </el-table-column>
    </el-table>
    <!-- 表格区结束 -->
    

    在这里插入图片描述

    三、使用@visible-change和@remove-tag实现业务功能

     <!-- 表格区开始 -->
     <el-table size="mini" :data="tableData" style="width: 98%">
       <el-table-column label="select" width="100">
         <template slot-scope="scope">
           <el-select
             v-model="value1"
             multiple
             placeholder="请选择"
             @visible-change="changeValue"
             @remove-tag="removeTag"
           >
             <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.label"
               :value="item.value"
             >
             </el-option>
           </el-select>
         </template>
       </el-table-column>
    </el-table>
    <!-- 表格区结束 -->
    

    在这里插入图片描述
    在这里插入图片描述

    四、传递多个参数

     <!-- 表格区开始 -->
     <el-table size="mini" :data="tableData" style="width: 98%">
       <el-table-column label="select" width="100">
         <template slot-scope="scope">
           <el-select
             v-model="value1"
             multiple
             placeholder="请选择"
             @visible-change="changeValue($event,scope.row)"
             @remove-tag="removeTag"
           >
             <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.label"
               :value="item.value"
             >
             </el-option>
           </el-select>
         </template>
       </el-table-column>
    </el-table>
    <!-- 表格区结束 -->
    

    说明@visible-change绑定的方法如果不带(),则会默认传递一个事件$event作为参数

    @visible-change="changeValue"
    @visible-change="changeValue($event")
    

    这两种写法是等效的,括号和$event参数可带可不带
    在这里插入图片描述
    但是,如果是需要传递两个或两个以上的参数,就必须显式地将所有参数写出来,如:

    @visible-change="changeValue($event,scope.row)"
    
    展开全文
  • 引入selectTree组件 import { selectTree } from '@/components' export default { components: { selectTree }, data() { defaultData:{ managementStationId:'1478570186653609986', ...
  • element-ui的el-form表单和el-table校验嵌套使用校验el-input和el-select
  • el-select入门学习

    2022-05-16 15:14:43
    1.el-select配合el-option使用 2.局部禁用和整体禁用 3.可清除内容关键字clearable 4.自定义下拉列表框 5.el-option-group和el-option配合使用(相当于两个for循环) 6.开启查询下拉列表功能关键字filterable 7.远程...
  • el-selectel-tree树形结构下拉单选和多选
  • 1.el-tree 多选->单选 ...<el-tree @check="change" @ref="treeRef"></el-tree> methods部分 change(data,checked,indeterminate){ this.$ref.treeRef....2.el-select 选中option之后没有立即生效 ht

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 87,163
精华内容 34,865
关键字:

el-select

友情链接: java1(3).rar