动态渲染表格、索引和多选、加按钮

用户不想看到分页，加showPagination
GTable.vue下的render

const {showPagination} = thisl
return(
		{showPagination && this.renderPagination(g_pageOptions)}
)

从外部接收一个showPagination

props:{
	showPagination:{
			type:Boolean,
			default:()=>true
}}

用一个变量之前要先声明

如下图，列是写死的，应该接收传进来的数据，动态渲染，所以删除选中部分

添加this.renderColumns()

{this.renderColumns() }

renderColumns() 是用来动态渲染列的

renderColumns(){
	
}

LoanListConf.js
prop：和data相关联

columns:[
	 {
            label: "姓名",
            prop: "name",
            // width:"20"
        },
        {
            label: "出生日期",
            prop: "birthday"
        },
        {
            label: "性别",
            prop: "sex"
        },
        {
            label: "教育程度",
            prop: "education"
        },
        {
            label: "居住地址",
            prop: "address1"
        },
        {
            label: "手机号",
            prop: "mobile_phone",
            isHide:false,
        },
        {
            label: "申请状态",
            prop: "status",
            slot: "status"
        },
        {
            label: "操作",
            width: 1000,
            prop: "opts",
            slot: "opts"
        },
        {
            label:'配送信息',
            children:[
                {
                    label:'地址',
                    children:[
                        { label:'省份',prop:'address1'},
                        { label:'市区'},
                        { label:'地址'},
                    ]
                }
            ]

        },
        {
            // html字符串formatter
            label:'自定义html',
            formatter:function(prop){
             // prop内部.row是行的数据, el-table-column
                return `<div>
                        <h2>${prop.row.name}</h2>
                        <button>${prop.$index}</button>
                </div>  `
            }

        }   
]

input-manager下的index下声明:columns
完善renderColumns函数
GTable下

引入数据后就有了很多列

columns

const{ columns } = this

{this.renderColumns(columns) }

数据是一个数组,map是有返回值的

renderColumns(columns){
	return columns.map(col => {
	return <el-table-column
			label={col.label}
			prop = {col.prop }
			width = {col.width}>
			</el-table-columns>
})}

数据渲染上来了，我觉得整个流程是现在配置文件里引入数据，在把数据写入组件，组件中接收columns，然后渲染。

添加列，多选，多表头，
userIndex 索引，userMultiSelect多选

{userIndex && this.renderIndex() }
{userMultiSelect  && this.renderMultiSelect() }

定义userMultiSelect，userIndex

设置默认值

gOptions:{
		userMultiSelect:false,
		userIndex:true,
}

添加解构

let {userIndex} = g_options;
let {userMultiSelect} = g_options;

新建方法renderIndex和renderMultiSelect
首列的渲染

renderIndex() {
	return
	<el-table-column
	type = "index"
	label = "序号"
	width = “55”
	align = "center">
	</el-table-column>
}

根绝true和false来触发多选和索引，渲染顺序很重要，代码在下面就后渲染

首列的多选

``` rederMultiSelect() { return

element-ui下
reserve-selection type = selection 翻页记住id 加载table列的属性
row-key 翻页记住id

支持tags和button的传递

首先搞清楚关系，其次传递slots
列的slot
1 传slot 用slot，不传用列
动态数据列的控制 !col.isHide

input-manager下,加tag
颜色的变化用转换器？转换器是啥？
用到了slot的作用域插槽

<template v-slot:status>
	<el-table-column  prop = "status"  label = "申请状态">
		<template v-slot = "{row}">
		<el-tag> {{ row.status}}</el-tag>
		</template>
	</el-table-column>
</template>

input-manager下,加按钮

<template v-slot:opts>
	<el-table-column  prop = "opts"  label = "操作">
			<template v-slot = "{row}">
		<el-button type="primary">编辑</el-button>
		<el-button type="danger">删除</el-button>
		<el-button type="success">提交审核</el-button>
				</template>
	</el-table-column>
</template>

renderColumns(columns) {
	return columns.map(col => {
			return col.slot ? this.$slots[col.slot] : !col.isHide && (
				<el-table-column
					label = {col.label}
					prop = {col.prop}
					width = {col.width}
					></el-table-column>		)	

})} 

知识点

• 插槽

$slot 和 $scopedSlots区别
代码的优化 $scopedSlots

renderColumns(columns) {
	return columns.map(col => {
			return col.slot ? this.$scopedSlots[col.slot](col): !col.isHide && (
				<el-table-column
					label = {col.label}
					prop = {col.prop}
					width = {col.width}
					></el-table-column>		)	

})} 

解构row

<template v-slot:opts = "col">
	<el-table-column  prop = "opts"  :label = "col.label"  :width="col.width">
			<template v-slot >
		<el-button type="primary">编辑</el-button>
		<el-button type="danger">删除</el-button>
		<el-button type="success">提交审核</el-button>
				</template>
	</el-table-column>
</template>

<template v-slot:status = "col">
	<el-table-column  :prop = "col.prop"  :label = "col.label">
		<template v-slot = "{row}" >
		<el-tag> {{ row.status}}</el-tag>
		</template>
	</el-table-column>
</template>

函数封装
renderColumns() 渲染列的改变
改了函数名renderTableColumns()

renderTableColumns(columns) {
	return columns.map(col => {
			this.renderTable(col)

})} 

新建了一个函数renderTableCol

renderTableCol(col,index ) {
		return col.slot ? this.$scopedSlots[col.slot]?.(col): !col.isHide && (
						<el-table-column
							label = {col.label}
							prop = {col.prop}
							width = {col.width}
							></el-table-column>		)	
}

渲染多表头

在renderTableCol下添加 ``` {col.children && col.children.length > 0 && this.renderColumns(col.children)} ``` loanListConf.js 下写配置信息

下面的写法。没有写姓名

{
	label:'配送信息'
	children:[
			{ label: ‘地址’，
			children:[
					{label:'省份',prop = "address1"}，
					{label: '市区'},
					{label:'地址'},
]}]}

在GTable下
renderTableCol() 下

{
	col.children && col.children.length > 0 && this.renderTableColumns(col.children)
}

新建GColumn.vue

<script>
export default {
	methods: {
renderTableCol(col,index ) {
		return col.slot ? this.$scopedSlots[col.slot](col): !col.isHide && (
						<el-table-column
							key = {index}
							label = {col.label}
							prop = {col.prop}
							width = {col.width}>
							{
	col.children && col.children.length > 0 && this.renderTableColumns(col.children)
						     }

						</el-table-column>		)	
} }}
</script>

methods 新增 renderTableColumns()

renderTableColumns(columns) {
	return columns.map(col => {
			this.renderTable(col)

})} 

columns是传递过来的数据

name:'GColumn'
props: {
	columns: {
		type:Array,
		required:true
}}

数据渲染

render() {
	return
	<div>{ this.renderTableColumns(this.columns)}</div>
}

在GTable上引入组件GColumn

<GColumn  scopeSlots = {this.$scopedSlots }  columns = { columns } />

plugins 导入、注册组件

下载 npm i vue-fragment -S
引入fragment

改变render

render() {
	return
	<fragment> { this.renderTableColumns(this.columns)} </fragment>
}

排除错误的方法之一：删除每段代码
排查是不是div结构引起的
组件优先执行