下拉选择分页组件

---

单选

无数据

在组件中需配置：

optionSource 下拉框组件数据源
valueKey 传入的 option 数组中，要作为最终选择项的键值名称
labelKey 传入的 option 数组中，要作为显示项的键值名称
paginationOption object 默认值

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-pagination-select
        v-model="materialId"
        :optionSource="materialIdArr"
        labelKey="materialName"
        valueKey="id"
        placeholder="请选择（单选）"
        :paginationOption="setSelectPage"
        @current-change="pageChange"
        @change="selectChange"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
import data from './data.json'
import data2 from './data2.json'
export default {
  name: 'TPaginationSelectDemo',
  data() {
    return {
      materialId: null,
      materialIdArr: [],
      setSelectPage: {
        pageSize: 6, // 每页显示条数
        currentPage: 1, // 当前页
        pagerCount: 7, // 按钮数，超过时会折叠
        total: 0 // 总条数
      }
    }
  },
  created() {
    this.selectMaterialList(1)
  },
  methods: {
    // 下拉选择分页
    pageChange(val) {
      this.setSelectPage.currentPage = val
      this.selectMaterialList(this.setSelectPage.currentPage)
    },
    // 获取品名下拉数据
    async selectMaterialList(pageNum) {
      let res
      if (pageNum === 1) {
        res = await data
      } else {
        res = await data2
      }
      if (res.success) {
        // console.log('获取品名下拉数据', res.data)
        this.materialIdArr = res.data.records
        this.setSelectPage.total = res.data.total
      }
    },
    selectChange(val) {
      console.log('selectChange', val, this.materialId)
    }
  }
}
</script>

显示代码

wocwin微信二维码

单选-默认值回显

无数据

在组件中需配置：

optionSource 下拉框组件数据源
valueKey 传入的 option 数组中，要作为最终选择项的键值名称
labelKey 传入的 option 数组中，要作为显示项的键值名称
paginationOption object 默认值

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-pagination-select
        @current-change="pageChange"
        :optionSource="materialIdArr"
        v-model="materialId"
        placeholder="请选择（单选）回显"
        labelKey="materialName"
        valueKey="id"
        :paginationOption="setSelectPage"
        @change="selectChange"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
import data from './data.json'
import data2 from './data2.json'
export default {
  name: 'TPaginationSelectDemo3',
  data() {
    return {
      materialId: 3,
      materialIdArr: [],
      setSelectPage: {
        pageSize: 6, // 每页显示条数
        currentPage: 1, // 当前页
        pagerCount: 7, // 按钮数，超过时会折叠
        total: 0 // 总条数
      }
    }
  },
  created() {
    this.selectMaterialList(1)
  },
  methods: {
    // 下拉选择分页
    pageChange(val) {
      this.setSelectPage.currentPage = val
      this.selectMaterialList(this.setSelectPage.currentPage)
    },
    // 获取品名下拉数据
    async selectMaterialList(pageNum) {
      let res
      if (pageNum === 1) {
        res = await data
      } else {
        res = await data2
      }
      if (res.success) {
        // console.log('获取品名下拉数据', res.data)
        this.materialIdArr = res.data.records
        this.setSelectPage.total = res.data.total
      }
    },
    selectChange(val) {
      console.log('selectChange', val, this.materialId)
    }
  }
}
</script>

显示代码

wocwin微信二维码

多选

无数据

在组件中需配置：

multiple：是否开启多选

optionSource 下拉框组件数据源
valueKey 传入的 option 数组中，要作为最终选择项的键值名称
labelKey 传入的 option 数组中，要作为显示项的键值名称
paginationOption object 默认值

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-pagination-select
        @current-change="pageChange"
        :optionSource="materialIdArr"
        v-model="materialId"
        labelKey="materialName"
        valueKey="id"
        placeholder="请选择（多选）"
        multiple
        :paginationOption="setSelectPage"
        @change="selectChange"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
import data from './data.json'
import data2 from './data2.json'
export default {
  name: 'TPaginationSelectDemo1',
  data() {
    return {
      materialId: null,
      materialIdArr: [],
      setSelectPage: {
        pageSize: 6, // 每页显示条数
        currentPage: 1, // 当前页
        pagerCount: 7, // 按钮数，超过时会折叠
        total: 0 // 总条数
      }
    }
  },
  created() {
    this.selectMaterialList(1)
  },
  methods: {
    // 下拉选择分页
    pageChange(val) {
      this.setSelectPage.currentPage = val
      this.selectMaterialList(this.setSelectPage.currentPage)
    },
    // 获取品名下拉数据
    async selectMaterialList(pageNum) {
      let res
      if (pageNum === 1) {
        res = await data
      } else {
        res = await data2
      }
      if (res.success) {
        // console.log('获取品名下拉数据', res.data)
        this.materialIdArr = res.data.records
        this.setSelectPage.total = res.data.total
      }
    },
    selectChange(val) {
      console.log('selectChange', val, this.materialId)
    }
  }
}
</script>

显示代码

wocwin微信二维码

多选-默认值回显

无数据

在组件中需配置：

multiple：是否开启多选

optionSource 下拉框组件数据源
valueKey 传入的 option 数组中，要作为最终选择项的键值名称
labelKey 传入的 option 数组中，要作为显示项的键值名称
paginationOption object 默认值

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-pagination-select
        @current-change="pageChange"
        :optionSource="materialIdArr"
        v-model="materialId"
        labelKey="materialName"
        valueKey="id"
        placeholder="请选择（多选）回显"
        multiple
        :paginationOption="setSelectPage"
        @change="selectChange"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
import data from './data.json'
import data2 from './data2.json'
export default {
  name: 'TPaginationSelectDemo2',
  data() {
    return {
      materialId: [3, 5, 6, 7],
      materialIdArr: [],
      setSelectPage: {
        pageSize: 6, // 每页显示条数
        currentPage: 1, // 当前页
        pagerCount: 7, // 按钮数，超过时会折叠
        total: 0 // 总条数
      }
    }
  },
  created() {
    this.selectMaterialList(1)
  },
  methods: {
    // 下拉选择分页
    pageChange(val) {
      this.setSelectPage.currentPage = val
      this.selectMaterialList(this.setSelectPage.currentPage)
    },
    // 获取品名下拉数据
    async selectMaterialList(pageNum) {
      let res
      if (pageNum === 1) {
        res = await data
      } else {
        res = await data2
      }
      if (res.success) {
        // console.log('获取品名下拉数据', res.data)
        this.materialIdArr = res.data.records
        this.setSelectPage.total = res.data.total
      }
    },
    selectChange(val) {
      console.log('selectChange', val, this.materialId)
    }
  }
}
</script>

显示代码

wocwin微信二维码

t-pagination-select——下拉分页组件

概述：

下拉分页组件————可实现单选多选

1、代码示例

<t-pagination-select
    v-model="materialId"
    :optionSource="materialIdArr"
    labelKey="materialName"
    valueKey="id"
    :paginationOption="setSelectPage"
  />

2、配置参数（Attributes）继承 el-select Attributes

参数	说明	类型	默认值
v-model	绑定值	boolean / string / number/Array	-
optionSource	下拉数据源	Array	-
width	select宽度（可以设置百分比或px）	String	100%
valueKey	传入的 option 数组中，要作为最终选择项的键值 key	String	'key'
labelKey	传入的 option 数组中，要作为显示项的键值名称	String	'label'
paginationOption	分页配置项	Object	-

2-1、paginationOption配置参数（Attributes）继承 el-pagination Attributes

参数	说明	类型	默认值
currentPage	当前页数	number	1
pageSize	每页显示条目个数	number	6
pagerCount	设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠	number	5
total	总条目数	number	0
layout	组件布局，子组件名用逗号分隔	string	'total,prev, pager, next'
bind	继承el-pagination属性	Object	-

3、继承 el-select&&el-pagination events