Select 下拉 组件

---

单选

• 开始
• POSUI
• 11
• GX123
• 烘干破碎
• 车间仓库
• ui3333
• hhh333

无数据

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-select
        placeholder="请选择工序"
        v-model="selectVlaue"
        :optionSource="stepList"
        valueKey="label"
        @change="selectChange"
      ></t-select>
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
export default {
  data() {
    return {
      selectVlaue: null,
      stepList: [
        { label: '开始', id: 1 },
        { label: 'POSUI', id: 2 },
        { label: '11', id: 3 },
        { label: 'GX123', id: 4 },
        { label: '烘干破碎', id: 5 },
        { label: '车间仓库', id: 6 },
        { label: 'ui3333', id: 7 },
        { label: 'hhh333', id: 8 }]
    }
  },
  methods: {
    selectChange(val) {
      console.log('selectChange', val, this.selectVlaue)
    }
  }
}
</script>

显示代码

wocwin微信二维码

单选分页

无数据

注意：每次切换页面会清空之前页面选中的数据

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-select
        v-model="materialId"
        :optionSource="materialIdArr"
        labelKey="materialName"
        valueKey="id"
        isShowPagination
        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: 'TSelectDemo',
  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微信二维码

自定义显示下拉项label

• 开始（1）
• POSUI（2）
• 11（3）
• GX123（4）
• 烘干破碎（5）
• 车间仓库（6）
• ui3333（7）
• hhh333（8）

无数据

设置customLabel字符串表达式：${_item.label}（${_item.id}）
注意：表达式必须以_item开头，且后面的属性必须存在optionSource中

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-select
        placeholder="请选择工序"
        v-model="selectVlaue"
        :optionSource="stepList"
        valueKey="label"
        customLabel="`${_item.label}（${_item.id}）`"
        @change="selectChange"
      ></t-select>
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
export default {
  data() {
    return {
      selectVlaue: null,
      stepList: [
        { label: '开始', id: 1 },
        { label: 'POSUI', id: 2 },
        { label: '11', id: 3 },
        { label: 'GX123', id: 4 },
        { label: '烘干破碎', id: 5 },
        { label: '车间仓库', id: 6 },
        { label: 'ui3333', id: 7 },
        { label: 'hhh333', id: 8 }]
    }
  },
  methods: {
    selectChange(val) {
      console.log('selectChange', val, this.selectVlaue)
    }
  }
}
</script>

显示代码

wocwin微信二维码

多选

全选
• 开始
• POSUI
• 11
• GX123
• 烘干破碎
• 车间仓库
• ui3333
• hhh333

无数据

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-select
        placeholder="请选择工序"
        v-model="selectVlaue"
        multiple
        :optionSource="stepList"
        valueKey="label"
        @change="selectChange"
      />
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
export default {
  data() {
    return {
      selectVlaue: null,
      stepList: [
        { label: '开始' }, { label: 'POSUI' }, { label: '11' }, { label: 'GX123' }, { label: '烘干破碎' }, { label: '车间仓库' }, { label: 'ui3333' }, { label: 'hhh333' }]
    }
  },
  methods: {
    selectChange(val) {
      console.log('selectChange', val, this.selectVlaue)
    }
  }
}
</script>

显示代码

wocwin微信二维码

多选分页

无数据

注意：每次切换页面会清空之前页面选中的数据

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-select
        v-model="materialId"
        :optionSource="materialIdArr"
        labelKey="materialName"
        valueKey="id"
        multiple
        isShowPagination
        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: 'TSelectDemo',
  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微信二维码

选中值返回对象

• 开始
• POSUI
• 11
• GX123
• 烘干破碎
• 车间仓库
• ui3333
• hhh333

无数据

在组件中配置：returnObject ；必须设置 value-key 属性且具有唯一性

<template>
  <t-layout-page>
    <t-layout-page-item>
      <t-select
        placeholder="选中值将以对象形式返回"
        v-model="selectVlaue"
        :optionSource="stepList"
        valueKey="id"
        value-key="id"
        returnObject
        @change="selectChange"
      ></t-select>
    </t-layout-page-item>
  </t-layout-page>
</template>
<script>
export default {
  data() {
    return {
      selectVlaue: null,
      stepList: [
        { label: "开始", id: 1 },
        { label: "POSUI", id: 2 },
        { label: "11", id: 3 },
        { label: "GX123", id: 4 },
        { label: "烘干破碎", id: 5 },
        { label: "车间仓库", id: 6 },
        { label: "ui3333", id: 7 },
        { label: "hhh333", id: 8 },
      ],
    };
  },
  methods: {
    selectChange(val) {
      console.log("selectChange", val, this.selectVlaue);
    },
  },
};
</script>

显示代码

wocwin微信二维码

t-select——下拉 组件组件

概述： 代码示例：

<t-select
  v-model="selectVlaue"
  :optionSource="listTypeInfo.stepList"
/>

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

参数	说明	类型	默认值
v-model	绑定值	boolean / string / number/Array	-
multiple	是否多选 （显示全选）	Boolean	false
optionSource	下拉数据源	Array	-
width	select宽度（可以设置百分比或px）	String	100%
customLabel	是否自定义设置下拉label	String	-
valueKey	传入的 option 数组中，要作为最终选择项的键值 key	String	'key'
labelKey	传入的 option 数组中，要作为显示项的键值名称	String	'label'
isShowPagination	是否显示分页（分页不显示全选框）	Boolean	false
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