基于Vue,Element-ui的分页下拉组件

基于vue,Element-ui的分页下拉组件
由于工作项目中用到了分页下拉,切项目前端主要使用Vue和Element-Ui开发,因此重新写了个分页下拉组件,使用简单,鉴于不同用途下,各个后端连接不同,返回结果不定,各属性对应Key不定,因此调用方需要自己提供数据列表,分页信息,查询方法,并传入相关key。话不多说,直接上代码:
组件核心代码

<template>
    <el-row>
      <el-col :span="24">
        <el-select v-model="copyValue" filterable clearable  placeholder="请选择" @change="updateValue" :style="'width:100%;min-width:250px'">
          <el-option
            v-for="item in dataList"
            :key="item.value"
            :label="item[labelKey]"
            :value="item[valueKey]">
          </el-option>
          <el-col :span="24">
            <div style="float: right;margin-right:10px;padding-bottom: 10px">
              <el-pagination
                @current-change="handleCurrentChange"
                :current-page="pageInfo.pageNum"
                :page-size="pageInfo.pageSize"
                layout="total, prev, pager, next"
                :total="pageInfo.total">
              </el-pagination>
            </div>
          </el-col>
        </el-select>
      </el-col>
    </el-row>
</template>

<script>
export default {
  name: "NewPageSelect",
  props:{
    //绑定值
    value:String,
    //下拉列表
    dataList:Array,
    //option的label在列表中对应的key
    labelKey:String,
    //option的value在列表中对应的key
    valueKey:String,
    //分页信息
    pageInfo:Object
  },
  watch:{
    value:{
      handler:function(val){
        this.copyValue=val;
      },
      deep:true
    }
  },
  methods:{
    //更新值
    updateValue(){
      this.$emit('update:value',this.copyValue);
    },
    //翻页
    handleCurrentChange(val) {
      this.$emit('selectPageChange',val);
    }
  },
  data() {
    return {
      copyValue:this.value
    };
  }
};
</script>

<style scoped>

</style>

调用方

 <template>
  <div>
    <new-page-select :value.sync="copyValue"
                     @selectPageChange="entityPageSearch"
                     :valueKey="'id'"
                     :labelKey="'entityName'"
                     :pageInfo="entityPageInfo"
                     :dataList="entityDataTable">
    </new-page-select>
  </div>
</template>

<script>
import NewPageSelect from '@/components/common/pageSelect/NewPageSelect';
export default {
  name: "EntitySelectPage",
  data(){
    return {
      //父实例下拉框的数据
      entityPageInfo:{
        pageNum:1,
        pageSize:5,
        total:0,
        param:{
          classId: '',
          classVersionId: ''
        },
      },
      //复制值
      copyValue:this.value,
      //父实例下拉框的数据
      entityDataTable:[]
    };
  },
  props:{
    value:String,
    classId:String,
    classVersionId:String
  },
  watch:{
    //监听copyValue值变化
    copyValue:{
      handler (newV, oldV) {
        this.$emit('update:value',this.copyValue);
      },
      deep:true
    }
  },
  methods:{
    //父实例翻页
    parentEntityPageChange(val){
      this.selectPageInfo.pageNum=val;
      this.selectPageSearch();
    },
    //父实例查询
    entityPageSearch(){
      if (this.classId){
        this.entityPageInfo.param.classId=this.classId;
      }
      if (this.classVersionId){
        this.entityPageInfo.param.classVersionId=this.classVersionId;
      }
      this.$post('/data/obj/entity/pageEntityAllPath',this.entityPageInfo).then(res=>{
        if (res.code==='1000') {
          this.entityDataTable=res.data.result;
          this.entityPageInfo.param.total=parseInt(res.data.totalRecord);
        }else {
          this.$message.error(res.msg);
        }
      });
    },
  },
  mounted(){
    this.entityPageSearch();
  },
  components:{
    NewPageSelect
  }
};
</script>

<style scoped>

</style>

    

效果图
在这里插入图片描述
在这里插入图片描述
个人能力有限,做的不好的请不吝赐教。

  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue.js使用 Element-UI 实现下拉列表(通常称为 Select)的多选功能Element UI 提供了一个名为 `el-select` 的组件,它可以方便地设置为多选模式。以下是基本步骤: 1. 引入依赖:首先确保在你的项目中已经安装了 Element UIVue,并且在组件中导入 `el-select` 和相关的样式。 ```html <template> <div> <el-select v-model="selectedValues" multiple placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </div> </template> ``` 2. 定义数据:在你的 Vue 实例中,定义一个数组 `selectedValues` 来存储用户选择的值,以及一个选项列表 `options`。 ```javascript export default { data() { return { selectedValues: [], // 存储选中的值 options: [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' }, // 更多选项... ], }; }, }; ``` 3. 设置属性:`v-model` 绑定了 `selectedValues`,`multiple` 属性表示可多选,`placeholder` 则是默认提示文字。 4. 使用 `el-option`:对于每个选项,用 `v-for` 指令遍历 `options` 数组,`:value` 和 `:label` 分别绑定选项的值和标签。 当你在下拉列表中点击选项时,`selectedValues` 就会自动更新,显示或隐藏多选框也会相应改变。如果需要进一步定制行为(如添加搜索功能分页等),可以查阅 Element UI 的文档进行详细配置。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值