YS-UIYsTable table 组件
v-model:data 直接渲染表格
TIP
可拖拽行排序
可双击单元格复制(配置:排除了姓名,跟操作单元格,具体可以看配置)
接口渲染
TIP
ps: 当前数据是通过mockjs模拟接口调用；
如果需要双向绑定数据；需要绑定v-model:data;这样组件接口请求完成，会更新绑定的值，即可获取到当前列表的数据
Table 属性
提示
属性可继承 element-plus的table 组件的table属性 el-table文档
| 参数 | 说明 | 类型 | 默认参数 | 是否必传 |
|---|---|---|---|---|
| data | 表格数组 | Array | -- | 是 |
| columnParams | 表格列 属性 | Array[object] | -- | 是 |
| selection | 启用多选框 | boolean | false | 否 |
| radio | 启用单选框 | boolean | false | 否 |
| radioProp | 当启用单选框的时候,改属性必填 | string | id | 否 |
| serialNumber | 是否显示序号 | boolean | true | 否 |
| emptyColumnText | 当列数据为空的时候默认显示的文字 | string | '--' | 否 |
| openCopy | 表格内是否打开双击单元格复制 如果组件绑定单元格点击cell-dblclick事件，会跟这个复制冲突 | boolean | false | 否 |
| excludeCopyColumn | 排除某些单元格不需要复制，把对应的column对应的prop添加到数组里面 列如：excludeCopyColumn=['name'],默认全都可以复制 | string[] | [] | 否 |
| draggable | 是否开启表格行拖拽排序功能 | boolean | false | 否 |
| fetch | 数据接口 当这个有值的时候，会自动请求数据并覆盖data数据，渲染到页面;接口会返回方法response,可以用于接听返回数据; 可以直接放接口方法,也可以使用箭头 :fetch="(_parmas: any) => getData(_parmas)" :fetch="getData" | function|Promise方法 | -- | 否 |
| requestParams | 接口初始请求参数 | object | -- | 否 |
columnParams 属性
提示
属性可继承 element-plus的table 组件的Table-column 属性 el-table文档filter 跟 render两个参数可以做同样的事,写两个,是为了更加的语义化,filter就是用来过滤,render则是渲染组件
| 参数 | 说明 | 类型 | 默认参数 | 是否必传 |
|---|---|---|---|---|
| prop | 属性名 | string | -- | 是 |
| label | 表格头 | string | -- | 是 |
| filter | 过滤 回调(_record: any, _value: any, _index: number) 当前表格列数据信息，当前表格的值信息,当前下标,渲染到表格是字符串形式 | function | -- | 否 |
| render | render函数,常用于自定义vue组件; 回调(_record: any, _value: any, _index: number) 当前表格列数据信息，当前表格的值信息,当前下标,渲染到表格是组件形式 | function | -- | 否 |
| slot | 自定义具名插槽名 | string | -- | 否 |
事件
提示
el-table 的事件都可以都可以使用
自定义事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| response | 当配置接口方法的时候,会回调接口返回的数据 | response |
| radioData | 单选返回的选中数据 | row |
| init | 根据请求参数，初始化表格，并调用接口重新渲染，如果需要重置翻页参数，请调用改方法，翻页参数并没有返回给父组件，所以refreshHandle是无法重置翻页参数的 |
Table 方法
提示
通过ref调用组件getYsTableRef的方法;则会返回ys-table内的table ref;然后调用el-table的方法