vue render https://cn.vuejs.org/v2/guide/render-function.html
iview render 視頻教程 https://ke.sifou.com/course/1650000011074057/section/1500000008892728
應用案例一
https://blog.csdn.net/weixin_33953384/article/details/91375029?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control
使用：
<Table border ref="selection" :columns="columns" :data="listData" :loading="false"></Table>
複製代碼
設置：
columns: [
{
type: 'selection',
width: 60,
align: 'center'
},
{
title: '排序值',
key: 'sortOrder',
align: 'center'
},
{
title: '品牌鏈接',
key: 'siteUrl',
align: 'center',
render: (h, params) => {
return h('a', {
attrs: {
href: params.row.siteUrl,
},
class:{
siteUrl: true,
}
}, params.row.siteUrl);
}
},
{
title: '操作',
align: 'center',
render: (h, params) => {
let row = params.row;
return h('div', [
h('Button', {
props: {
type: 'ghost',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.toCheckDetails(row.id);
}
}
}, '查看'),
h('Button', {
props: {
type: 'ghost',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.toEdit(row.id);
}
}
}, '編輯')
]);
}
}
]
複製代碼
屬性大全：
render: (h, params) {//params是一個對象，包含 row、column 和index，分別指當前行數據，當前列數據，當前行索引
return h('div', {
props: { // Component props
msg: 'hi',
},
attrs: { // normal HTML attributes
id: 'foo'
},
domProps: { // DOM props
innerHTML: 'bar'
},
on: { // Event handlers
click: this.clickHandler
},
// For components only. Allows you to listen to native events, rather than events emitted from the component using vm.$emit.
nativeOn: {
click: this.nativeClickHandler
},
class: { // class is a special module, same API as `v-bind:class`
foo: true,
bar: false
},
style: { // style is also same as `v-bind:style`
color: 'red',
fontSize: '14px'
},
// other special top-level properties
key: 'key',
ref: 'ref',
// assign the `ref` is used on elements/components with v-for
refInFor: true,
slot: 'slot'
})
}
複製代碼
table組件input值的綁定和獲取： 1、render函數中不能直接使用v-model； 2、解決辦法：
render: (h, {row}) => {
return h('Input', {
props: {
clearable: true,
placeholder: '標籤編號',
value: row.tagCode,
},
on: {
input: (val) => {
row.tagCode = val;
}
}
});
}
應用案例二
https://blog.csdn.net/weixin_43206949/article/details/89385550
iview 的render函數就是vue的render函數
iview常用在表格裏面自定義內容
render函數常用的配置
h就是createdElement的簡寫
3個參數如下：
h("元素名稱或組件名稱", {
domProps: { // 原生dom元素的一些屬性
value: 1,
type: 'number',
min: 1，
innerHTML：’‘
},
props:{ // 傳給組件數據 比喻iview Button的type,size 等等
type:'text',
size:'small'
}，
class:{ // 類
btn:true//
}，
attrs:{ // html屬性,class
id:'box'
class:'brn2'
}，
style:{ // 內聯樣式
},
slot:'slotName', // 組件的插槽
on:{ // 事件 包括組件的自定義事件
click:()=>{
},
'on-change':()=>{
},
}，
nativeOn:{ // 類似vue的.native修飾符，自定義組件常用
click:()=>{
}
}
}
,'文本啊啊啊'
)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
h的第二個參數支持數組的形式，數組裏面可以是多個h渲染出來的元素對象或字符串
eg:
1，渲染多個組件
{
title: '操作',
width: 150,
render: (h, { row, index }) => {
let btn = h('i-switch', {
props: {
value: row.join_status === 1 ? true : false,
size: 'large',
loading: row.loading
},
on: {
'on-change': (val) => {
this.tabData[index].loading = true
if (!val) {
this.$Modal.confirm({
title: '你確定要禁用該加盟商嗎？',
content: '<p>禁用將會導致該加盟商下所有人員無法登陸CRM系統</p>',
onOk: () => {
this.changeChannelStatus(row.id)
},
onCancel: () => {
this.tabData[index].loading = false
}
});
return
}
this.changeChannelStatus(row.id)
}
}
}, [
h('span', {
slot: 'open',
domProps: {
innerHTML: 'ON'
}
}),
h('span', {
slot: 'close',
domProps: {
innerHTML: 'OFF'
}
})
]
)
let edit = h('a', {
style: {
'margin-right': '15px',
},
on: {
click: () => {
this.$router.push({ name: 'addJoiner', query: { ...row, tit: '編輯加盟商' } })
}
}
}, '編輯')
return h('div', [edit, btn])
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
效果圖：
switch 異步時loading狀態
2，渲染自定義組件
{
title: '狀態',
render: (h, { row }) => {
return h(myTag, {
props: {
color: row.join_status === 1 ? '#52C41A' : 'red'
},
class: {
'hahah': true
},
nativeOn: { //事件
click: () => {
alert(1)
}
}
}, row.join_status === 1 ? '正常' : '解約')
}
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
值得注意的是配置的參數vlaue支持變量。
怎麼綁定v-model?
這個問題vue官方說了：是沒法綁定的，只能自己實現
實現也不難
eg:
{
title: '價格',
key: 'name',
render: (h, { row, index }) => {
let input = h('input', {
domProps: {
value: row.price,
type: 'number',
min: 1
},
style: {
width: '200px',
display: 'inline-block',
height: '32px',
'line-height': 1.5,
},
on: {
change: (event) => { // 實現綁定數據
let val = event.target.value
this.tabData[index].price = val
}
}
})
let arr = [input]
let tip = h('span', {
style: {
color: 'red',
marginLeft: '10px'
}
}, '必填，最多保留兩位小數')
if (row.tip) {
arr.push(tip)
}
return h('div', arr)
}
}