# 功能描述

xselect-table表格选择框支持选择时弹出表格选择框 扩展功能:
1.支持单选
2.支持多选
3.支持对多字段赋值

# 属性props

本控件props属性有3部分组成,分别为:1、控件本身属性,2、数据源属性

1.控件本身属性

参数 必填 数据类型 默认值 可选值 说明
isString Boolean true true/false 结果返回值类型是否是字符串类型(仅多选时有效,即multiSelect值为true)
multiSelect Boolean false true/false 是否多选
disabled Boolean false true/false 是否禁用
readonly Boolean false true/false 是否只读
label String 选择框前的文本
value String, Number, Boolean 接受外部v-model传入的值
width String 文本框宽度
dialogWidth String 弹出框宽度
dialogHeight String 弹出框高度
placeholder String 请选择 提示信息
dataSource JSON 数据源配置
idField String 从表格中拿到v-mode绑定的变量的字段名字
labelField String 从表格中拿到文本框中显示的字段名字
xext.sync 用于选择扩展字段,指定选择后的值存放的变量,例如选择了用户,还要拿用户的部门编号到这个变量中,参见源码的角色设置(sys_role)模块
xext-option JSON 用于选择扩展字段,指定要选择的字段,参见源码的角色设置(sys_role)模块

2.数据源属性见data-source数据源的props属性

# 例1: 扩展字段选择

  <template>
      <x-select-table v-model="scope.row.uid" readonly v-rules="[{type:'required'}]" idField="uid" labelField="name" :xext.sync="scope.row.name" :xext-option="{xext:'name'}" :data-source="{head:{module:'sys_user'},option:{fields:'uid,name'}}" dialogWidth="700">
          <x-query slot="query">
              <x-query-item prop="uid" label="用户编号"/>
              <x-query-item prop="name" opt="like" label="姓名"/>
          </x-query>
          <template>
              <x-table-column prop="uid" label="编号" width="100"/>
              <x-table-column prop="name" label="姓名"/>
          </template>
      </x-select-table>
   </template>
1
2
3
4
5
6
7
8
9
10
11
12

提示

将数据源中选择的uid字段值放到scope.row.uid变量中,同时将选中行的name字段(:xext-option="{xext:'name'}"指定的name字段)放到scope.row.name变量中
参见源码的角色设置(sys_role)模块