封装表格_分页组件

renderCards(cards) {
	return cards.map(card => {
		return (
			<el-card class="box-card">
			<div slot="header">
				<span>{card.name}</span>
			</div>
			{card.children && this.renderRows(card.children)}
			</el-card>
)})}

• 加margin-bottom

.box-card {
	margin-bottom:10px;
	>div {
		>div {
			text-align:left;
}}}

• 加日期 element ui 的DateTimePicker

case 'datetime' :
return <el-date-picker
v-model = {this.form[item.key]}
type = "date"
placeholder = "选择日期">
</el-date-picker>

• 写按钮的点击事件

loan-input index下

<GformCreator ref="createForm" :conf="inputConf">
<template>
<div>
<el-button @click="createUser" type="primary"></el-button>
<el-button @click="reset">重置</el-button>
</div>
</template>
</GformCreatot>

点击事件createUser，拿到数据，没有数据输出验证不通过
有的话打印
通过ref绑定组件，调用子组件的方法
resetFields()？ 专门用来重置表单的嘛？

methods: {
	createUser() {
		// 验证
		this.$refs.createForm.validate((data) => {
				if(!date) return this.$message('表单验证不通过');
				console.log('数据:',data);
			})},
	reset() {
		this.$refs.createForm.reset()
}
},

createUser()方法生效
reset方法生效

• 设置mockdata

在这里插入代码片

• apis 下新建loan.js
  api应该是专门请求接口数据的

import { request,pretty } from '@/utils/request'

export const createLoan = (data) => {
		return pretty(request(
		{url: '/loan/create'
		method:'post',
		data,
		)})}

• loan-input index.vue
  == 请求接口获取数据，==

import {createLoan} from '@/apis/loan'

let[res,err] = await createLoan(mockdata);
if(err) return this.$message('创建用户失败');
console.log(res,'res');

• request.js

if(response?.data?.code === 20000) {
		Message.success(response?.data?.data);
		return response;
}

$data组件里面存数据

inputManager

<template>
<GTable :options="conf.options">

</Gtable>
</template>
<script>
export default {
		data() {
			return {}
}}
</script>

loanListConf.js配置数据结构的

export default {
		options:{}, // table 属性
		pageOptions:{}, // 分页器属性
		columns:[] // column的配置
}

多写了一个.

没有给组件名字
传递4个属性
inputManager

<script> import loanListConf from './loanListConf';</script> 
<template>
<GTable 
:options="conf.options" 
:data = "tableData",
pageOptions:{},//分页器属性
:columns = "conf.columns">
</Gtable>
</template>

plugin中引入和注册组件GTable
GTable.vue
接收父组件的传值

<script>
	export default {
		props:{
			options:{
			type:Object,
			default:()=>{
					return this.gOptions
}},
			pageOptions: {
				type:Object,
				default:() => {
					return this.gpageOptions;
		}},
			data: {
					type:Array,
					required:true,
				},
			columns :{
					type:Array,
					default: () =>[]
				}}
</script>

设置一些表格的默认值：

data() {
	return {
			//multiSelect:true,
			//index:true,
		gOptions:{
			height:400,
			stripe:true,
			border:false,
			fit:true,
			showHeader:true,
			rowKey:'id',
}，
	gPageOptions: {}
}}

computed: {
	g_options() {
		return Object.assign({},this.gOptions,this.option)
}},

computed 监视外部属性的改变，合并本来的配置 g_options 返回合并属性

表格渲染

attrs:

render() {
// const {g_options} = this;
console.log(this.g_options,'this');
return (
<div>
{this.g_options}
<div>
)}

打印的时候有，输出没有。

g_options: 是computed里面的
gOptions是data里面的

render() {
		const {gOptions} = this;
		console.log(this.g_options,'this');
		return (
		<div>
		<el-table attrs = {gOptions}>
		</el-table>
		{this.g_options}
<div>
)}

发请求，拿到data下的数据

• api 下的loan.js

别忘记引入request

export const queryLoan = (params) => {
		return pretty( request( {
				url:'/loan/list',
				params,
}))}

input-manager index下

import {queryLoan} from '@/apis/loan'
created () {
			this.loanLoanByPage();
},

export default {
data() {
	tableData:[],  // 表格的data API接口获取
	conf:loanListConf  // 定义的数据结构

methods:{
// 分页函数
	async	loadLoanByPage() {
			// 1 后续需要管理pageNo 页码
			// 2 发请求获取数据，传递到table组件中
		let [res,err] = await	queryLoan({
				pageNo:1,
				pageSize:10
}) ;
	console.log(res,err,'list数据')
	this.tableData = res?.data?.data?.data?.data;
	console.log(this.tableData)
}}}

数据给了GTable，由于:data绑定了tableData

GTable下
render渲染的DOM
添加 data={data}，渲染到表格上

render() {
		const {gOptions} = this;
		console.log(this.g_options,'this');
		return (
		<div>
		<el-table data={data} attrs = {gOptions}>
		</el-table>
		{this.g_options}
<div>
)}

下有了数据，如图。但是没有渲染到页面，因为缺少列

产生列和列表？ column 也就是el-table-column

render() {
		const {gOptions} = this;
		console.log(this.g_options,'this');
		return (
		<div>
		<el-table data={data} attrs = {gOptions}>
				<el-table-column
					prop = "name"
					label = "姓名"
					width = "180">
					</el-table-column>
					<el-table-column
					prop = "address"
					label = "地址">
					</el-table-column>
		</el-table>
		{this.g_options}
<div>
)}

渲染成功一列

封装方法 renderTable() ，renderPagination(options)

	renderTable() {
	return (
		const {g_options,data} = this;
			<el-table data={data} attrs={g_options}>
				<el-table-column
			prop = "name"
			label = "姓名"
			width = "180">
			</el-table-column>
			<el-table-column
			prop = "address"
			label = "地址">
			</el-table-column>
					</el-table>)
}}

renderPagination(options) {
	return(
				<el-pagination
				onSize-change = "handleSizeChange"
				onCurrent-change = "handleCurrentChange"
				cunrrent-page ={1}
				page-sizes = {[100,200,300,400]}
				page-size={100}
				layout= "total,sizes,prev,pager,next,"
				total = {400}>
				</el-pagination>
				)
},

分页是个假的分页
用attrs = {options}代替原来的属性，将原来的属性写入options上

renderPagination(options) {
	return(
				<el-pagination
				onSize-change = "handleSizeChange"
				onCurrent-change = "handleCurrentChange"
				attrs = {options}
				total = {400}>
				</el-pagination>
				)
},

render() {
return (
	<div>
				{this.renderTable() }
				{this.renderPagination(this.gPageOption) }
	</div>
)}

一些默认值

data() {
return {
	gPageOptions:{
		currentPage:1,
		pageSizes:[100,200,300,400]
		pageSize:100,
		total:400,
}
}}

添加解构

render() {
		const {gPageOptions} = this;
		return (
			<div>
				{this.renderTable()}
				{this.renderPagination(gPageOptions)}
			</div>
)}

computed 下加值

computed() {
g_options() {
		return Object.assign({},this.gOption,this.options)
}
g_pageOptions() {
	return Object.assign({},this.gPageOptions,this.pageOptions)
}}

render() {
		const {g_pageOptions} = this;
		return (
			<div>
				{this.renderTable()}
				{this.renderPagination(g_pageOptions)}
			</div>
)}

GTable下
handleCurrentChange：子组件的方法
innerHandleCurrentChange：父组件的事件

handleCurrentChange(page) {
	this.$emit('handleCurrentChange',page)
}

index.vue
组件传值

@handleCurrentChange = "innerHandleCurrentChange">

声明分页方法

innerHandleCurrentChange() {
	console.log(page,'翻页了');
	}

翻页了，重新发起请求

再次调用函数loadLoanByPage()
加一个参数1

created () {
			this.loanLoanByPage(1);
}

加一个参数page

innerHandleCurrentChange(page) {
	console.log(page,'翻页了');
	this.loadLoanByPage(page);	
}

加一个参数page

aync loadLoanByPage(page) {
	let [res,err] = await queryLoan({
			pageNo:page,
			pageSize:10
});
	this.tableData = res?.data?.data?.data?.data;
}

报错信息：

错误原因：dom节点错了

今天就这样吧，表格没渲染出来，明天继续，今天这种学习方式不是很好，应该记笔记一段，再敲代码一段的。

表格loading

上午重听了一遍，发现函数没有加return，导致表格没有渲染上去，还有数据请求不成功，报错图二


上图是因为接收数据的数据结构错了，不用数组就可以拿到数据了。下图这个鬼样子，还把res和err换了位置。得到图1

可能实现的逻辑更重要一些吧