# 数据组件

# 表格 lg-table

参数	说明	类型	必须	默认值
dataSource	表单数据对象	Array	是
columns	表单配置描述	Array	是
pagination	分页	Object/Boolean	是
select	是否开启选择	Boolean	否	false
selectList/v-model:selectList	默认选择数据	Array	否
bordered	是否展示外边框和列边框	Boolean	否	false
size	大小	String	否	middle
scroll	是否滚动`(1.1.1新增)`	Boolean	否	true
tableClass	表格class`(1.1.1新增)`	String	否	true
preserveSelectedRowKeys	当数据被删除时仍然保留选项的 key`(1.1.2新增)`	Boolean	否	true
scrollDeploy	设置表格滚动xy`(1.1.3新增)`	Object	否	{ y: 100}
customScroll	自定义滚动（主要弹窗或者表单设置表格高度使用）`(1.1.3新增)`	Boolean	否	false
tableId	表格id`(1.1.3新增)`	String	否	id

# 插槽

名称	说明	调用值
actions	默认操作栏插槽/需要在columns配置名称dataIndex为_actions的列，	column，record，index，indexs
字段插槽如（name）	各字段的插槽名称同dataIndex	column，record，text，index，indexs

注：更多插槽见ant文档 (opens new window)

# 回调

名称	说明	回调参数
change	选中数据回调
page	分页回调	current，pageSize

# 可调用方法

名称	说明	回调参数
deriveExcel	导出当前页数据，选中则导出选中`(1.1.1新增)`

# columns

类型：Array

描述：用于表头名称配置，在a-table原有基础上增加如下配置

columns:[
            {
			show:true,//设置show为true表示该列不在列表中显示
             rich_text:true,//是否为富文本
             function: e =>{return e?'是':"否"} //插入一个函数用于数据格式化
			}
			 ],

案例：

<template>
  <div>
	  <div  style="padding: 3.125rem;">
		  <lg-table bordered select
		   @change='change'
		   @page='openpage'
		   :dataSource='data.dataSource'
		   :columns='data.columns'
		   v-model:selectList='data.selectList'>
		   <template #name='{text}'>
		   		  <a-tag color="blue">{{text}}</a-tag>
		   </template>
		   <template #actions>
			 <a-button type="primary">编辑</a-button>
		   </template>
		  </lg-table>
	  </div>
  </div>
</template>
<script setup>
import {reactive} from 'vue'
const data = reactive({
	selectList:['1'],
	dataSource:  [
	         {
	           id: '1',
	           name: '胡彦斌',
	           age: 32,
	           address: '西湖区湖底公园1号',
	         },
	         {
	           id: '2',
	           name: '胡彦祖',
	           age: 42,
	           address: '西湖区湖底公园1号',
	         },
			 {
			   id: '3',
			   name: '胡彦祖',
			   age: 42,
			   address: '西湖区湖底公园1号',
			 },
	       ],
			columns: [
	         {
	           title: '姓名',
	           dataIndex: 'name',
	         },
	         {
	           title: '年龄',
	           dataIndex: 'age',
	          function: (e) => {return e+'岁'}
	         },
	         {
	           title: '住址',
	           dataIndex: 'address',
			   show:true,
			   },
			  {
			    title: '操作',
			    dataIndex: '_actions',
				width:100
			  },
	       ],
});
// 分页
let openpage =(e)=>{
	console.log(e);
}
// 选择
let change =(e)=>{
	console.log(e);
}
</script>

← 更新日志反馈组件 →