Element Plus Manual

<el-date-picker

format="YYYY/MM/DD"  value-format="YYYY-MM-DD"

只用format=“YYYY/MM/DD” 就有當前日期的默認值，加上value-format="YYYY-MM-DD"就沒有。

el-date-picker

日期相差一天，需要格式化

    <el-form-item label="First Date" >
      <el-date-picker
        v-model="form.dateFirst"
        type="date"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
        placeholder="Pick a day"
        size="default"
        style="width: 45%;"
      />
    </el-form-item>
    <el-form-item label="End Date">
      <el-date-picker
        v-model="form.dateEnd"
        type="date"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
        placeholder="Pick a day"
        size="default"
        style="width: 45%;"
      />
    </el-form-item>

tab 頁

<el-dialog v-model="taskVisible" title="To be sure task list"  style="width: 900px; height: 580px;" class="tableBox">

        <el-radio-group v-model="group_customer" label="label position" style="margin-bottom: 10px;">
            <el-radio-button label="group" οnclick="viewGroupOrCustomerTask(1)">Group</el-radio-button>
            <el-radio-button label="customer" οnclick="viewGroupOrCustomerTask(2)">Customer</el-radio-button>
        </el-radio-group>
    
        <el-table :data='dataHelper.getAllData("code",group_customer,20)' max-height="350" :scrollbar-always-on=true>
        <el-table-column prop="name" label="Name"/>
        <el-table-column prop="state" label="Send Invoice">
            <el-checkbox v-if="dataHelper.getBollean()" :checked=true />
            <el-checkbox v-else :checked=false />
        </el-table-column>
        <el-table-column prop="city" label="Print Invoice">
            <el-checkbox v-if="dataHelper.getBollean()" :checked=true />
            <el-checkbox v-else :checked=false />
        </el-table-column>
        <el-table-column prop="address" label="Send Statement">
            <el-checkbox v-if="dataHelper.getBollean()" :checked=true />
            <el-checkbox v-else :checked=false />
        </el-table-column>
        <el-table-column prop="zip" label="Print Statement" >
            <el-checkbox v-if="dataHelper.getBollean()" :checked=true />
            <el-checkbox v-else :checked=false />
        </el-table-column>
        <el-table-column prop="zip" label="Print Courier">
            <el-checkbox v-if="dataHelper.getBollean()" :checked=true />
            <el-checkbox v-else :checked=false />
        </el-table-column>
        <el-table-column fixed="right" label="Operations">
        <template #default="scope">
            <el-button
            size="small"
            type="danger"
            :icon="Remove"
            @click.prevent="deleteRow(scope.$index)">
            </el-button>
        </template>
        </el-table-column>
    </el-table>

    <template #footer>
      <span class="book-layout-span-center">
        <el-button @click="taskVisible = false">Cancel</el-button>
        <el-button type="primary" @click="taskVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
</el-dialog>

分隔綫

<el-divider content-position="left" class="line-invoice">Invoice Set up</el-divider>

分隔綫+備注

      <el-divider content-position="left" class="line-invoice">Statement Set up
          <div style="display: inline; margin-left:10px ;vertical-align:middle;">
      <el-popover
        :width="300"
        popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
      >
        <template #reference>
          <el-icon><IEpQuestionFilled /></el-icon>
        </template>
        <template #default>
            <p>
              All of customer who need to make statement,system will attech the invoice files and statement files.
            </p>
        </template>
      </el-popover>
      </div></el-divider>

上傳

<!-- <div class="div-send-email">
          <el-upload
              class="upload-demo"
              drag
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              multiple
          >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
              Drop file here or <em>click to upload</em>
              </div>
              <template #tip>
              <div class="el-upload__tip">
                  please keep template file size less than 500kb
              </div>
              </template>
          </el-upload>
      </div> -->

内置对齐方式

class="flex flex-col justify-center items-center"

class="flex justify-between items-center flex-wrap"

两边对齐
flex justify-between items-center flex-wrap

style=“display: flex;flex-direction: row;justify-content: space-between;”

居中对齐

Referren element-ui from表单居中 from here

      <!-- 一级归属 -->
      <el-col>
        <el-form-item
          label="一级归属"
          prop="primaryOwnership"
          style="display: inline-block"
        >
          <el-select v-model="ruleForm.primaryOwnership" placeholder="请选择一级归属">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      </el-row>

需要上下两级设置，有时间需要好好研究下
父元素：text-align: center
子元素：display: inline-block


.div-center {
text-align: center;
background-color:#f7f7f6;
width:60%;
margin:0 auto;
padding:2%;
}

el-radio-group 垂直

               <el-radio-group v-model="form.code" style="display: block;">
                    <el-row>
                        <el-radio label="1" border>Normal</el-radio>
                    </el-row>
                    <div style="margin:10px 0"></div>
                    <el-row>
                        <el-radio label="2" border>Special</el-radio>
                    </el-row>
                </el-radio-group>

div broder

<div class="div-send-email"></div>
.div-send-email {
  width: 100%;
  height: 200px;
  border: 1px solid var(--el-border-color);
}