关于vue使⽤render函数，封装⼀个完整的table表格，基于elementui
前⾔：在做后台管理系统的时候，⼩伙伴经常会遇到多个页⾯会使⽤到表格，我们如果不进⾏封装的话，那么每个页⾯都得引⽤⼀次，并且书写⼀定的样式。所以，在这⾥我做了⼀个简装的基于elementui封装的表格。技术不好 ，望理解。
1.⼦组件
<el-table
:data="data">
<el-table-column
v-for="(col, index) in rowHeader"
:key="index"
:prop="col.prop"
:label="col.label"
align="center">
<template slot-scope="scope">
<ex-slot
v-if="der"
:render="der"
:row="w"
:index="scope.$index"
:column="col">
</ex-slot>
<span v-else>
{{w[col.prop]}}
</span>
</template>
</el-table-column>
</el-table>
//这⾥是循环我们的表头，会将表头值传⼊，会进⾏判断如果⾃⼰有进⾏⾃定义render的话，那么就采⽤render⽅式，否则渲染prop值
<script>
// ⾃定义内容的组件
var exSlot ={
functional:true,
props:{
row: Object,
render: Function,
index: Number,
column:{
type: Object,
default:null
}
},
render:(h, data)=>{
const params ={
vue element adminrow: w,
index: data.props.index
}
if(lumn) lumn = lumn
return der(h, params)
}
}
export default{
props:{
// 表格数据
data:{
type: Array,
default:()=>{
return[]
}
},
// 表头数据
rowHeader:{
type: Array,
type: Array,
default:()=>{
return[]
}
}
},
data(){
return{
}
},
methods:{
},
mounted(){
},
//⾃定义组件
components:{
'ex-slot': exSlot },
}
</script>
2.⽗组件中
//引⼊
import Excel from'@/components/common/excel.vue'
//注册
components:{Excel}
//使⽤
<Excel
:data="list"
:
rowHeader="rowHeader"
/>
//传⼊相应的值，表格数据list、头部数据rowHeader
<script>
export default{
data(){
return{
list:[
{
id:1001,
title:'这是什么，超过20个字缩略',
lable:'随⼿晒',
time:'2020-5-6',
name:'⼤⽩熊',
state:1,
img:"img3.imgtn.bdimg/it/u=1986451467,394304688&fm=26&gp=0.jpg", }
],
rowHeader:[
//没有经过处理的
{
prop:'lable',
label:'标签'
},
//经过处理的
{
prop:'state',
label:'操作',
render:(h,params)=>{
w.state===1){
return h('el-button',{
on:{
click:()=>{
console.log(this.alert)
}
},
domProps:{
innerHTML:'删除'
}
})
}else w.state===2){
return h('el-button','清空',{
on:{
w)
}
})
}
}
}
],
]
}
}
</script>
tips：通过render⾃主放⼊⾃⼰需要⽤的东西render创建⼦节点，在第三个属性中去render 栗⼦:
{
prop:'',
label:'内容',
render:(h, params)=>{
return h('div',{
class:{
info:true
},
style:{
display:'flex',
},
},
[
//左侧
h('div',{
class:{
infoLeft:true
},
},
[
h('img',{
attrs:{
w.img
},
style:{
display:"block",
width:"30px",
height:"30px"
}
})
]
),
//右侧
h('div',{
class:{
infoRighe:true
},
style:{
display:"flex",
flexDirection:'column',
paddingLeft:"10px",
textAlign:"left"
}
},
[
h('p',{
domProps:{
w.title
},
}),
h('p',{
domProps:{
innerHTML:'ID:'+ w.id
},
})
]
)
,
]
)
}
},
详细⽤法见:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。