curd组件中的时间设置

Avue crud组件中时间选择组件的使用

前言

因为Avue crud能让被设置的选框，设置一次就能在搜索框和“新增”按钮点击后弹出的新增填框内显示。使用当两处我们希望的效果不一样时，就需要做对应的改变，且不影响另一处。下面是对时间选择组件一些常用属性的说明和演示。

两者属性区别

大部分属性两者可以通用，但部分属性设置后会导致另外一个选框无法正常输入或选择。

在页面上展示的宽度，搜索框用 searchSpan调整；新增选框用span调整；

searchDefaultTime，设置搜索框默认的时间；不会影响新增框的默认时间。

注意！defaultTime属性也能设置默认时间，但是因为此处搜索框时间选择器是选择的两个时间（一个开始时间和一个结束时间），新增框时间选择器是选择一个时间，如果用defaultTime设置默认时间，对另外一个会有影响。例：设置defaultTime: [“00:00:00”, “23:59:59”]，搜索框的开始时间时分秒会默认为00:00:00，结束时间会默认为23:59:59。但是此时新增框无法选择时间。

展示整个crud组件代码

<template>
  <div class="container">
    <avue-crud :data="data" :option="option" :table-loading="showLoading" :page.sync="page" >
      <template slot="menuBtn">
        <el-dropdown-item divided>自定义按钮</el-dropdown-item>
      </template>
      <template slot-scope="{ type, size }" slot="menu">
        <el-button :type="type" :size="size">自定义按钮</el-button>
      </template>
      <template slot="menu">
        <div class="block">
          <span class="demonstration">默认</span>
          <el-date-picker v-model="value1" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" >
          </el-date-picker>
        </div>
      </template>
    </avue-crud>
  </div>
</template>

<script> export default {
       data() {
       return {
       page: {
       total: 100, currentPage: 1, }, data: [ {
       name: "张三", sex: "男", occurrenceTime: "2022-07-22 22:20:09", }, {
       name: "李四", sex: "女", occurrenceTime: "2020-07-12 22:20:09", }, ], menuType: "text", showLoading: false, showCard: false, showBorder: false, showStripe: false, showHeader: true, showIndex: true, showCheckbox: false, showPage: true, sizeValue: "small", }; }, computed: {
       option() {
       return {
       title: "表格的标题", titleSize: "h3", titleStyle: {
       color: "red", }, card: this.showCard, border: this.showBorder, stripe: this.showStripe, showHeader: this.showHeader, index: this.showIndex, size: this.sizeValue, selection: this.showCheckbox, page: this.showPage, align: "center", menuAlign: "center", menuType: this.menuType, menuBtnTitle: "Avue crud组件时间选择组件属性介绍", column: [ {
       label: "姓名", prop: "name", //与数据关联 数据data中对应的属性名 search: true, searchSpan: 8, }, {
       label: " 性别", prop: "sex", search: false, //在搜索区域展示（是否成为搜索筛选条件） }, //时间选择器配置 {
       label: "时间", prop: "occurrenceTime", type: "datetime", search: true, //在搜索区域展示（是否成为搜索筛选条件） searchSpan: 16, //在搜索框占一行的三分钟二（共24 16占三分钟二） searchRange: true, span: 24, //新增弹出框内选项 占满一行（共24） format: "yyyy-MM-dd HH:mm:ss", //时间格式 HH表示24小时制 hh表示12小时制 valueFormat: "yyyy-MM-dd HH:mm:ss", searchDefaultTime: ["00:00:00", "23:59:59"], //搜索框的默认时分秒设置 rules: [ {
       required: true, //在新增时是否必填 message: "请选择时间", //如果没有填 在输入框下方的提升文字 trigger: "blur", //trigger触发方式 blur失去焦点时触发 }, ], pickerOptions: {
       disabledDate(time) {
       //配置什么时间不能被选中 return time.getTime() > Date.now(); //当前日期之后的日期不能被选 }, }, }, ], }; }, }, }; </script>

<style></style>