在
iview的Table组件中添加日期选择器和
Input输入框可以通过
iview的template模板语法来实现，可以参考以下代码：
```html
<template>
<Table :columns="columns" :data="data">
<template slot-scope="{row, column}">
<div v-if="column.key === 'date'">
<DatePicker :value="row[column.key]" type="date" @on-change="onDateChange(row, column.key, $event)" />
</div>
<div v-else-if="column.key === '
input'">
<
Input v-model="row[column.key]" @on-change="on
InputChange(row, column.key, $event.target.value)" />
</div>
<div v-else>
{{ row[column.key] }}
</div>
</template>
</Table>
</template>
<script>
import { Table, DatePicker,
Input } from 'view-design'
export default {
components: {
Table,
DatePicker,
Input
},
data() {
return {
columns: [
{
title: '日期',
key: 'date'
},
{
title: '内容',
key: '
input'
},
{
title: '备注',
key: 'remark'
}
],
data: [
{
date: '2021-08-01',
input: '示例1',
remark: '备注1'
},
{
date: '2021-08-02',
input: '示例2',
remark: '备注2'
}
]
}
},
methods: {
onDateChange(row, key, value) {
row[key] = value
},
on
InputChange(row, key, value) {
row[key] = value
}
}
}
</script>
```
这里使用
iview的DatePicker组件来选择日期，使用
Input组件来输入内容，通过在Table组件的template插槽中添加DatePicker和
Input组件，可以将选择器和
输入框添加到表格的每一行中。
注意，在onDateChange和on
InputChange方法中，需要将选择器选中的日期值或
输入框输入的值赋值给对应的行数据属性，这样才能实现选择器和
输入框的同步更新。
4218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
