用户不想看到分页,加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() { returnelement-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结构引起的
组件优先执行