YsTable 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	否
height	纵向内容过多时，可选择固定表头。只要在 el-table 元素中定义了 height 属性，即可实现固定表头的表格，而不需要额外的代码	string	100%	否
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的方法