onespot组件文档库

# 下拉选择表格组件

# 基本使用

在组件中需配置：
v-model 绑定值
list 数据源
configure 表头配置以及选项中的value（选项的值）,label(选项的标签)
max-height 下拉框的最大高度，默认'350px'

configure: {
  columns: [
    // title表头标题，width列宽，prop对应的属性名
    { title: '物料编号', width: '149px', prop: 'code' },
    { title: '物料名称', width: '149px', prop: 'name' },
    { title: '规格', width: '149px', prop: 'spec' },
    { title: '单位', width: '110px', prop: 'unitName' },
  ],
  keywords: {
    // 相当于el-option中的label和value
    label: 'name', // 选项的标签
    value: 'id', // 选项的值
  },
},

<template>
  <t-select-table v-model="value" :configure="configure" :list="list" max-height="300px"></t-select-table>
</template>

<script>
export default {
  data () {
    return {
      value: null,
      configure: {
        columns: [
          { title: '物料编号', width: '149px', prop: 'code' },
          { title: '物料名称', width: '149px', prop: 'name' },
          { title: '规格', width: '149px', prop: 'spec' },
          { title: '单位', width: '110px', prop: 'unitName' },
        ],
        keywords: {
          label: 'name',
          value: 'id',
        },
      },
      list: [
        { id: 1, code: 1, name: '物料名称1', spec: '物料规格1', unitName: '吨' },
        { id: 2, code: 2, name: '物料名称2', spec: '物料规格2', unitName: '吨' },
        { id: 3, code: 3, name: '物料名称3', spec: '物料规格3', unitName: '吨' },
        { id: 4, code: 4, name: '物料名称4', spec: '物料规格4', unitName: '吨' },
        { id: 5, code: 5, name: '物料名称5', spec: '物料规格5', unitName: '吨' },
        { id: 6, code: 6, name: '物料名称6', spec: '物料规格6', unitName: '吨' },
        { id: 7, code: 7, name: '物料名称7', spec: '物料规格7', unitName: '吨' },
        { id: 8, code: 8, name: '物料名称8', spec: '物料规格8', unitName: '吨' },
        { id: 9, code: 9, name: '物料名称9', spec: '物料规格9', unitName: '吨' },
        { id: 10, code: 10, name: '物料名称10', spec: '物料规格10', unitName: '吨' },
        { id: 11, code: 11, name: '物料名称11', spec: '物料规格11', unitName: '吨' },
        { id: 12, code: 12, name: '物料名称12', spec: '物料规格12', unitName: '吨' },
        { id: 13, code: 13, name: '物料名称13', spec: '物料规格13', unitName: '吨' },
      ]
    }
  },
  watch: {
    'value': {
      handler (val) {
        console.log('value的值:', val);
      }
    }
  },
}
</script>

<style>
</style>
显示代码

# 选中后返回对象

如果需要TSelectTable 返回选中的对象,添加returnObj属性,请务必指定 keywords中的value 作为它的唯一性标识,并配合selectChange事件赋值。

configure: {
  columns: [
    // title表头标题，width列宽，prop对应的属性名
    { title: '物料编号', width: '149px', prop: 'code' },
    { title: '物料名称', width: '149px', prop: 'name' },
    { title: '规格', width: '149px', prop: 'spec' },
    { title: '单位', width: '110px', prop: 'unitName' },
  ],
  keywords: {
    label: 'name', // 选项的标签
    value: 'id', // 返回对象所需的的唯一标识
  },
},

<template>
  <t-select-table 
  v-model="form.id" 
  returnObj 
  :configure="configure" 
  :list="list" 
  @selectChange="selectChange"
  ></t-select-table>
</template>

<script>
export default {
  data () {
    return {
      form: {
        id: null,
        code: null,
        name: null,
        spec: null,
        unitName: null,
      },
      configure: {
        columns: [
          { title: '物料编号', width: '149px', prop: 'code' },
          { title: '物料名称', width: '149px', prop: 'name' },
          { title: '规格', width: '149px', prop: 'spec' },
          { title: '单位', width: '110px', prop: 'unitName' },
        ],
        keywords: {
          label: 'name',
          value: 'id',
        },
      },
      list: [
        { id: 1, code: 1, name: '物料名称1', spec: '物料规格1', unitName: '吨' },
        { id: 2, code: 2, name: '物料名称2', spec: '物料规格2', unitName: '吨' },
        { id: 3, code: 3, name: '物料名称3', spec: '物料规格3', unitName: '吨' },
        { id: 4, code: 4, name: '物料名称4', spec: '物料规格4', unitName: '吨' },
        { id: 5, code: 5, name: '物料名称5', spec: '物料规格5', unitName: '吨' },
        { id: 6, code: 6, name: '物料名称6', spec: '物料规格6', unitName: '吨' },
        { id: 7, code: 7, name: '物料名称7', spec: '物料规格7', unitName: '吨' },
        { id: 8, code: 8, name: '物料名称8', spec: '物料规格8', unitName: '吨' },
        { id: 9, code: 9, name: '物料名称9', spec: '物料规格9', unitName: '吨' },
        { id: 10, code: 10, name: '物料名称10', spec: '物料规格10', unitName: '吨' },
        { id: 11, code: 11, name: '物料名称11', spec: '物料规格11', unitName: '吨' },
        { id: 12, code: 12, name: '物料名称12', spec: '物料规格12', unitName: '吨' },
        { id: 13, code: 13, name: '物料名称13', spec: '物料规格13', unitName: '吨' },
      ]
    }
  },
  methods: {
    selectChange (value) {
      console.log('返回对象', value);
      const { id, code, name, spec, unitName } = value
      this.form = { id, code, name, spec, unitName }
      // this.form.id = id
      // this.form.code = code
      // this.form.name = name
      // this.form.spec = spec
      // this.form.unitName = unitName
      console.log('form表单',this.form);
    },
  }
}
</script>

<style>
</style>
显示代码

# 开启分页功能

isShowPagination 开启分页功能
@size-change页面大小改变事件
@current-change页码改变事件
需要在configure配置中添加tablePagination配置项

      configure: {
        columns: [
          { title: '物料编号', width: '149px', prop: 'code' },
          { title: '物料名称', width: '149px', prop: 'name' },
          { title: '规格', width: '149px', prop: 'spec' },
          { title: '单位', width: '110px', prop: 'unitName' },
        ],
        keywords: {
          label: 'name',
          value: 'id',
        },
        tablePagination: {
          total: 0, // 总数
          currentPage: 1, // 当前页码
          pageSize: 10, // 当前页面大小
        }
      },

<template>
  <t-select-table 
  isShowPagination 
  v-model="value" 
  :configure="configure" 
  :list="list"
  @size-change="handleSizeChange" 
  @current-change="handleCurrentChange" 
  ></t-select-table>
</template>

<script>
export default {
  data () {
    return {
      value: null,
      configure: {
        columns: [
          { title: '物料编号', width: '149px', prop: 'code' },
          { title: '物料名称', width: '149px', prop: 'name' },
          { title: '规格', width: '149px', prop: 'spec' },
          { title: '单位', width: '110px', prop: 'unitName' },
        ],
        keywords: {
          label: 'name',
          value: 'id',
        },
        tablePagination: {
          total: 100,
          currentPage: 1,
          pageSize: 10,
        }
      },
      list: [
        { id: 1, code: 1, name: '物料名称1', spec: '物料规格1', unitName: '吨' },
        { id: 2, code: 2, name: '物料名称2', spec: '物料规格2', unitName: '吨' },
        { id: 3, code: 3, name: '物料名称3', spec: '物料规格3', unitName: '吨' },
        { id: 4, code: 4, name: '物料名称4', spec: '物料规格4', unitName: '吨' },
        { id: 5, code: 5, name: '物料名称5', spec: '物料规格5', unitName: '吨' },
        { id: 6, code: 6, name: '物料名称6', spec: '物料规格6', unitName: '吨' },
        { id: 7, code: 7, name: '物料名称7', spec: '物料规格7', unitName: '吨' },
        { id: 8, code: 8, name: '物料名称8', spec: '物料规格8', unitName: '吨' },
        { id: 9, code: 9, name: '物料名称9', spec: '物料规格9', unitName: '吨' },
        { id: 10, code: 10, name: '物料名称10', spec: '物料规格10', unitName: '吨' },
        { id: 11, code: 11, name: '物料名称11', spec: '物料规格11', unitName: '吨' },
        { id: 12, code: 12, name: '物料名称12', spec: '物料规格12', unitName: '吨' },
        { id: 13, code: 13, name: '物料名称13', spec: '物料规格13', unitName: '吨' },
      ]
    }
  },
  methods: {
    handleSizeChange (val) {
      console.log('页面大小改变', val);
      // 调接口，为list赋值
    },
    handleCurrentChange (val) {
      console.log('页码改变', val);
      // 调接口，为list赋值
    },
  },
  watch: {
    'value': {
      handler (val) {
        console.log('value的值:', val);
      }
    }
  },
}
</script>

<style>
</style>
显示代码

# 2. 配置参数（Attributes）

参数 说明 类型 默认值
v-model 绑定值 boolean / string / number 无
list 数据源 Array 无
configure 下拉框配置项 Object 无
---columns 表头配置 Array 无
------title 表头标题 String 无
------width 表头宽度 String '110px'
------prop 对应的属性 String 无
---keywords 关键字配置 Object 无
------label 选项的标签 String 无
------value 选项的值 String 无
---tablePagination 分页配置 Object 无
------total 总数 Number 无
------currentPage 页码 Number 无
------pageSize 页面大小 Number 无
returnObj 开启返回对象 Boolean false
isShowPagination 开启分页 Boolean false
maxHeight 下拉框最大高度 String '350px'
thBorder 开启表头边框 Boolean true
tdBorder 开启表体边框 Boolean true

# 3. 事件（events）

事件名 说明 回调参数
selectChange 选中值发生变化时触发 目前的选中值
visible-change 下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false
remove-tag 多选模式下移除 tag 时触发 移除的 tag 值
clear 可清空的单选模式下用户点击清空按钮时触发
blur 当 input 失去焦点时触发
focus 当 input 获得焦点时触发

# 4.方法（Methods）

方法名 说明 回调参数
focus 使 input 获取焦点
blur 使 input 失去焦点，并隐藏下拉框

← TSimpleForm 表单组件(component 模式) →