Vue 推薦在絕大多數情況下使用 template 來創建你的 HTML。然而在一些場景中，你真的需要 JavaScript 的完全編程的能力，這就是 render 函數，它比 template 更接近編譯器
全文參考https://www.jianshu.com/p/f44a32f83cc8 的思路寫出來的。着急的小伙伴可以直接看她寫的，很棒~
iview官網例子
第一次看iview的時候都蒙蔽了，不知道啥是render，緊跟着后面那么多東西，然后今兒給縷一縷。
首先把官網的代碼copy下來放到自己運行的vue項目中
數據都是動態的，emmmm，看一下最長的就是第一個姓名，然后我看不懂，不要慌往下看。。。
我改了一下，從寫死的數據開始
這里我表格里的姓名，都是寫死的數據，並且加了樣式
{
title: '姓名',
key: 'name',
render: (h, params) => {
return h('div', { //寫你要創建的元素的標簽名
style:{ //寫元素的樣式（注意text-align等有‘-’的css屬性需要刪掉‘-’，‘-’后的字母變大寫,否則報錯）
width:'160px',
height:'100px',
background:'#ccc',
textAlign:'center',
lineHeight:'100px',
}
}, '小明') //寫元素的內容
}
},
然后我希望一個單元格里放倆元素代碼
{
title: '姓名',
key: 'name',
render: (h, params) => {
return h('div', {
style:{
width:'120px',
height:'100px',
background:'#ccc',
textAlign:'center',
lineHeight:'100px',
}
},[h('p',{ style:{
color:'red',
}
},'愛吃草')],'小明') //以數組的形式括起來內容，看我給他一個文字顏色
}
},
驚呆了，我的小明去哪里了！！！
如圖可見，當元素嵌套時，元素里面的內容會覆蓋父元素的內容
解決方法：我再套一個元素
{
title: '姓名',
key: 'name',
render: (h, params) => {
return h('div', {
style:{
width:'120px',
height:'100px',
background:'#ccc',
textAlign:'center',
lineHeight:'100px',
float:'left',
}
}, [
h('p',{ style:{
color:'red',
float:'left',
}
},'愛吃草'),
h('p',{ style:{ //我嵌套的元素
color:'yellow',
float:'left',
}
},'愛吃飯')
],'小明')
}
},
反正我現在是大概知道這個render咋用的了
{
title:'地址',
key:'address',
render:(h,params) =>{
return h('div',{
style:{
backgroundColor:'skyblue',
},
},params.row.address)
}
},
點擊事件直接在第二個參數里加就可以（官網有例子）
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, '看看'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index)
}
}
}, '刪除')
]);
}
//h: vue Render函數的別名（全名 createElement）即 Render函數
//params： table 該行內容的對象
//props：設置創建的標簽對象的屬性
//style：設置創建的標簽對象的樣式
//on：為創建的標簽綁定事件
//所以代碼中的render函數，即創建的一個div中包裹一個button按鈕，同時給button設置了相關屬性和綁定事件
補充：在表格里插入輸入框，在官網上有兩種方法。今天只說一種：
我的代碼
template
<Table border :columns="columns7" :data="data6" width="600"></Table>
{{data6}}
<br />
<button @click="add" type="primary">添加點我啊啊啊啊啊</button>
data
columns7: [
{
title: '姓名',
key: 'name',
render:(h,params) =>{
return h('Input',{
props:{
value:params.row.name,
size:'small'
},
on:{
input:(val) =>{
this.data6[params.index].name = val
}
}
})
}
},
{
title: '年齡',
key: 'age',
render:(h,params)=> {
let b = []
let DataList = [
{
value: '0',
label: '這是0',
},
{
value: '1',
label: '這是1',
},
{
value: '2',
label: '這是2',
},
{
value: '3',
label: '這是3',
}
]
DataList.forEach(item=>{
b.push(h('Option', {
props: {
label: item.label,
value: item.value
},
}, item))
})
return h('Select', {
props: {
// value: this.data6[params.index].age,
label:this.data6[params.index].age,
size:'small',
},
on: {
input: (val) => {
this.data6[params.index].age = val
}
},
}, b)
}
},
{
title:'地址',
key:'address',
render:(h,params) =>{
return h('Input',{
props:{
value:params.row.address,
size:'small'
},
on:{
input:(val) =>{
this.data6[params.index].address = val
}
}
})
}
},
{
title: '操作',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, '看看'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index)
}
}
}, '刪除')
]);
}
}
], data6: [
{
name: 'John Brown',
age: 2,
address: 'New York No. 1 Lake Park'
},
{
name: 'Jim Green',
age: 1,
address: 'London No. 1 Lake Park'
},
{
name: 'Joe Black',
age: '0',
address: 'Sydn12323ey No. 1 Lake Park'
},
{
name: 'Jon Snow',
age: 2,
address: 'Ottawa No. 2 Lake Park'
}
]
method
show (index) {
this.$Modal.info({
title: 'User Info',
content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
})
},
add(){
this.data6.push({
name:'',
age:'',
address:'',
})
},
remove (index) {
this.data6.splice(index, 1);
}