可以通过在子
组件的表格列定义中使用`scoped-slot`来
自定义渲染日期选择器，然后在父
组件中
传递一个日期选择器的`props`给子
组件，在子
组件中使用该`props`来控制日期选择器的显示和隐藏。
以下是一个简单的示例代码：
在父
组件中：
```
<template>
<div>
<DatePicker v-model="selectedDate" />
<Table :data="tableData">
<Table-column prop="name" label="姓名" />
<Table-column prop="age" label="年龄" />
<Table-column label="生日">
<template slot-scope="{row}">
<Date-Picker
v-show="row.showDatePicker"
v-model="row.birthday"
type="date"
@on-ok="hideDatePicker(row)"
/>
<div v-else @click="showDatePicker(row)">{{ row.birthday }}</div>
</template>
</Table-column>
</Table>
</div>
</template>
<script>
import { DatePicker, Table } from "
iview";
export default {
components: {
DatePicker,
Table
},
data() {
return {
selectedDate: null,
tableData: [
{
name: "张三",
age: 20,
birthday: "1999-01-01",
showDatePicker: false
},
{
name: "李四",
age: 22,
birthday: "1997-06-15",
showDatePicker: false
},
{
name: "王五",
age: 25,
birthday: "1994-11-30",
showDatePicker: false
}
]
};
},
methods: {
showDatePicker(row) {
row.showDatePicker = true;
},
hideDatePicker(row) {
row.showDatePicker = false;
}
}
};
</script>
```
在子
组件中：
```
<template>
<div>
<Table :data="tableData">
<Table-column prop="name" label="姓名" />
<Table-column label="生日">
<template slot-scope="{row}">
<Date-Picker v-model="row.birthday" type="date" />
</template>
</Table-column>
</Table>
</div>
</template>
<script>
import { DatePicker, Table } from "
iview";
export default {
components: {
DatePicker,
Table
},
props: {
datePickerProps: Object
},
data() {
return {
tableData: [
{
name: "张三",
birthday: "1999-01-01"
},
{
name: "李四",
birthday: "1997-06-15"
},
{
name: "王五",
birthday: "1994-11-30"
}
]
};
}
};
</script>
```
在父
组件中使用子
组件时，
传递日期选择器的`props`：
```
<template>
<div>
<DatePicker v-model="selectedDate" />
<ChildComponent :datePickerProps="datePickerProps" />
</div>
</template>
<script>
import ChildComponent from "./components/ChildComponent.
vue";
export default {
components: {
ChildComponent
},
data() {
return {
selectedDate: null,
datePickerProps: {
type: "date"
}
};
}
};
</script>
```
这样就可以在子
组件的表格列中渲染日期选择器，并且可以根据`props`来控制日期选择器的显示和隐藏了。
3418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
