❤️砥砺前行，不负余光，永远在路上❤️
目录
-
一、使用slot-scope 自定义表格（绑定值）
-
二、使用render自定义表格 和下边header一样
-
三、自定义表头renderHeader
自定义渲染 官网给了两种方式，render 和 slot-scope，之前用过element 好像是使用 template 的时候里边可以直接v-model 双向绑定表格的值，iview 里边直接使用 v-model 好像并不能 ，我这项目用的是 3.x的 后边的版本也没看。
一、使用slot-scope 自定义表格（绑定值）
动态绑定值，要结合on-change事件来设置，直接
v-model="row.etd"
并不能改变表格里边每一行的值。
@on-change="setData($event, index, 'etd')"
setData(e, index, type) {
console.log(e, 'eee')
this.tabledata[index][type] = e
console.log(this.tabledata)
},
使用的时候注意columns 就行
效果
如上图 想要自定义表头，修改表头数据实现全部数据联动的话就需要自定义表头了
二、使用render自定义表格 和下边header一样
render: (h, params) => {
return h('DatePicker', {
props: { //参数
type: 'date',
value: params.row.payDate ? params.row.payDate : (this.currSelectCB[params.index] && this.allDateCB ? this.allDateCB : ''),
// disabled: !this.currSelectCB[params.index],
disabled: !params.row._checked,
transfer: true
},
style: {
width: '150px'
},
on: {
'on-change': (val) => {
this.selectedId.forEach(item => {
if (item.id == params.row.id) {
item.payDate = val
}
})
console.log(this.selectedId)
}
}
})
}
三、自定义表头renderHeader
在官网可以看到 使用
renderHeader
具体写法可以参考：
renderHeader: (h, param) => {
return h('div', [
h('span', {
style: {
display: 'inline-block',
width: '50px'
}
}, 'ETD预配'),
h('DatePicker', {
props: {
// value: this.allDateSR,
transfer: true,
},
style: {
display: 'inline-block',
width: '105px'
},
on: {
'on-change': (value) => {
this.tabledata.forEach(v => {
v.etd = value //修改所有表格数据
});
}
}
})
])
},
上一篇：
vue beforeEach 导致的Uncaught (in promise) RangeError: Maximum call stack size excee，导致页面不显示
下一篇：
js 在当前时间加一小时
java中的salt java中的三大特性
1、封装什么是封装，封装的目的是什么？程序中的封装，可以加强了我们数据的安全性和数据的可靠性。数据不直接对外暴露。 public class Person {
private String personName;
private String personSex;
//get和set方法书写规范
public String getP
