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>