問題描述
需求是在table中使用日期組件,table是已經封裝好的,通過render渲染el-date-picker組件
問題解決
- 頁面渲染
// 注意 :column="item" 其中item是tableData的一項
<template slot-scope="scope">
<ex-slot v-if="item.render" :render="item.render" :column="item" :row="scope.row" :index="scope.$index" />
<span v-else v-title>{{ scope.row[item.key] }}</span>
</template>
- 自定義組件
var exSlot = {
functional: true,
props: {
row: Object,
render: Function,
index: Number,
column: {
type: Object,
default: null
}
},
render: (h, data) => {
const params = {
row: data.props.row,
index: data.props.index
}
if (data.props.column) params.column = data.props.column
return data.props.render(h, params)
}
}
- render日期組件
supportDate(item) {
item.render = (h, params) => {
return h('el-date-picker', {
props: {
placeholder: '請選擇',
value: params.row[params.column.key],
'value-format': 'yyyy-MM-dd'
},
on: {
input: val => {
// change事件無效,blur事件也不合適,就使用input了
this.insideTableData[params.index][params.column.key] = val
}
}
})
}
return item
}