需求
在使用d2-crud-plus时,需要在新增与编辑时添加时间范围,并且时间范围可设置多个。
需要一个添加按钮,点击后新增一个时间范围,新增的时间范围可删除。
效果
新增/编辑弹窗
点击添加
点击删除后
d2-crud-plus中代码
crud.js
export const crudOptions = (vm) => {
return {
...
columns: [
...
{
title: '时间',
key: 'time',
type: 'time',
show: false,
form: {
slot: true,
component: {
span: 24
}
}
}
]
}
}
index.vue
<template>
<d2-container :class="{ 'page-compact': crud.pageOptions.compact }">
<d2-crud-x ref="d2Crud" v-bind="_crudProps" v-on="_crudListeners">
<template slot="timeFormSlot" slot-scope="scope">
<div v-for="(item, index) in scope.form.time" :key="index" :disabled="scope.mode === 'view'" style="margin: 0 10px 10px 0;">
<el-time-picker is-range v-model="scope.form.time[index]" range-separator="-" start-placeholder="开始时间" value-format="timestamp" end-placeholder="结束时间" placeholder="选择时间范围">
</el-time-picker>
<el-button style="margin-left: 10px;" icon="el-icon-minus" type="danger" :disabled="scope.mode === 'view'" @click="removeTopic(index)"></el-button