이 문서에서는 선택 상자에 iView 테이블 구성 요소, 날짜의 사용에 대해 설명합니다, 당신은 테이블, 하이퍼 링크 및 기타 구성 요소를 편집 할 수 있습니다.
1.select 구성 요소 선택
// tableColumn数组响应对象需要传入一个固定的option数组,如果该数组是异步动态生成的该组件不能正常渲染,因为在获取option数组之前table渲染时option是undefined。
supportSelect(item) {
item.render = (h, params)=>{
return h('Select', {
props: {
value: params.row[params.column.key],
size: 'small',
transfer: true
},
on: {
'on-change': (val)=>{
this.insideTableData[params.index][params.column.key] = val
}
},
},item.option.map(item=>{
return h('Option', {
props: {
value: item.value || item,
label: item.label || item
}
}, item.label || item)
}))
}
return item
}
2. 편집 가능한 형태
// 可编辑表格使用了contenteditable属性,使得表格编辑更加简单干净
supportEdit(item, index){
item.render = (h, params)=>{
return h('div', {
style: {
padding: '4px 0',
width: '100%'
},
props: {
value: this.insideTableData[params.index][params.column.key]
},
attrs: {
contenteditable: this.editable,
title: '点击可编辑'
},
on: {
'blur': evt=>{
evt.target.value = evt.target.innerText || params.row[params.column.key]
params.row[params.column.key] = evt.target.innerText
this.insideTableData[params.index][params.column.key] = evt.target.innerText
}
}
}, params.row[params.column.key])
}
return item
}
구성 요소의 3 일
// 使用iview的DatePicker组件渲染就行
supportDate(item){
item.render = (h, params)=>{
return h('DatePicker', {
props: {
clearable: false,
placeholder: '请选择日期',
value: params.row[params.column.key],
type: 'date',
format: 'yyyy-MM-dd',
size: 'small'
},
on: {
'on-change': (val)=>{
this.insideTableData[params.index][params.column.key] = val
}
}
})
}
return item
}
4. 테이블은 하이퍼 링크를 추가
// 这里的handleLink方法是在table组件中定义好的使用$emit让父组件调用
supportLink(item){
item.render = (h, params)=>{
return h('a', {
style: {
textDecoration: 'underline'
},
on: {
'click': ()=>{
this.handleLink(params.row)
}
}
}, params.row[params.column.key])
}
return item
}