d2-crud-plus 使用小技巧（一）——新增与编辑时添加时间范围（可手动添加与删除），并且时间范围可设置多个，时间重叠校验。

需求

在使用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