Time setting in curd component

Avue crud Use of time selection components in components

Preface

because Avue crud Can make the selected box set , You can set it once in the search box and “ newly added ” The new filling box that pops up after clicking the button displays . Use when the effect we want is different in two places , You need to make corresponding changes , Without affecting another place . The following is a description and demonstration of some common attributes of the time selection component .

The two attributes are different

Most attributes can be common to both , However, after some properties are set, another selection box cannot be input or selected normally .

The width displayed on the page , For search box searchSpan adjustment ; The new selection box is used span adjustment ;

searchDefaultTime, Set the default time of the search box ; It will not affect the default time of the new box .

Be careful ！defaultTime Property can also set the default time , But because the search box time selector here is the selected two times （ A start time and an end time ）, The new box time selector is to select a time , If you use defaultTime Set the default time , It will affect another . example ： Set up defaultTime: [“00:00:00”, “23:59:59”], The start time of the search box will default to 00:00:00, The end time will default to 23:59:59. But the time cannot be selected in the new box .

Show the whole crud Component code

<template>
  <div class="container">
    <avue-crud :data="data" :option="option" :table-loading="showLoading" :page.sync="page" >
      <template slot="menuBtn">
        <el-dropdown-item divided> Custom buttons </el-dropdown-item>
      </template>
      <template slot-scope="{ type, size }" slot="menu">
        <el-button :type="type" :size="size"> Custom buttons </el-button>
      </template>
      <template slot="menu">
        <div class="block">
          <span class="demonstration"> Default </span>
          <el-date-picker v-model="value1" type="datetimerange" range-separator=" to " start-placeholder=" Start date " end-placeholder=" End date " >
          </el-date-picker>
        </div>
      </template>
    </avue-crud>
  </div>
</template>

<script> export default {
       data() {
       return {
       page: {
       total: 100, currentPage: 1, }, data: [ {
       name: " Zhang San ", sex: " male ", occurrenceTime: "2022-07-22 22:20:09", }, {
       name: " Li Si ", sex: " Woman ", 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: " Table 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 Component time selection component attribute introduction ", column: [ {
       label: " full name ", prop: "name", // Associated with data   data data Corresponding property name in  search: true, searchSpan: 8, }, {
       label: "  Gender ", prop: "sex", search: false, // Show in the search area （ Whether to become a search filter ） }, // Time selector configuration  {
       label: " Time ", prop: "occurrenceTime", type: "datetime", search: true, // Show in the search area （ Whether to become a search filter ） searchSpan: 16, // Three minutes and two in one line of the search box （ common 24 16 It takes three minutes and two ） searchRange: true, span: 24, // Add options in the pop-up box   Fill a line （ common 24） format: "yyyy-MM-dd HH:mm:ss", // Time format  HH Express 24 hourly  hh Express 12 hourly  valueFormat: "yyyy-MM-dd HH:mm:ss", searchDefaultTime: ["00:00:00", "23:59:59"], // The default time, minute and second setting of the search box  rules: [ {
       required: true, // Is it required when adding  message: " Please select a time ", // If not   The lifting text below the input box  trigger: "blur", //trigger Trigger mode  blur Trigger when out of focus  }, ], pickerOptions: {
       disabledDate(time) {
       // Configure when cannot be selected  return time.getTime() > Date.now(); // Dates after the current date cannot be selected  }, }, }, ], }; }, }, }; </script>

<style></style>