1. 修改表格篩選圖標(biāo)

ElementUI中的表格組件的篩選功能，老實(shí)說(shuō)做的有點(diǎn)粗糙了，首當(dāng)其中的便是icon了，下面就說(shuō)下如果替換icon。

.xb-table {
  .el-icon-arrow-down::before {
    font-family: 'iconfont';
    // 使用你想要的替換圖標(biāo)字體
    content: '\e68f';
    font-size: 20px;
  }
}

2. 表格添加loading效果

el-table的v-loading屬性可以指定顯示隱藏loading效果,同時(shí)添加下列屬性可以在加載的時(shí)候進(jìn)行效果控制：
element-loading-background: 屬性可以定義加載動(dòng)畫(huà)的背景，
element-loading-text:屬性指定加載提示文字
element-loading-spinner:屬性指定加載動(dòng)畫(huà)效果

<el-table
   v-loading = "isLoading"
   element-loading-background = "rgba(255, 255, 255, .5)"
   element-loading-text = "加載中，請(qǐng)稍后..."
   element-loading-spinner = "el-icon-loading">
</el-table>

3. 表格設(shè)置默認(rèn)勾選項(xiàng)

Table組件設(shè)置對(duì)應(yīng)行默認(rèn)勾選上，就調(diào)用組件的內(nèi)部方法toggleRowSelection，把對(duì)應(yīng)項(xiàng)的數(shù)據(jù)傳進(jìn)入就可以了。

async getTableData() {
    const {data: { records } } = await queryBillData()
    this.billTableData = records.map(item => {
      // 根據(jù)自己的業(yè)務(wù)條件判斷
      if (item.negativeFlag) {
        // 默認(rèn)勾選對(duì)應(yīng)項(xiàng)
        this.$refs.billTable.toggleRowSelection(item, true)
      }
      return item
    })
  }

4. 表格設(shè)置禁選項(xiàng)

Table組件設(shè)置對(duì)應(yīng)行禁止勾選，可對(duì) type=selection 列設(shè)置selectable屬性的函數(shù)返回值來(lái)控制，返回值為false，則該行禁止勾選。

<template>
  <el-table
    ref="costomTable"
    :data="tableData"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55"
      :selectable="initSelectable"
      >
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    initSelectable(row) {
      // 返回值為false 禁止勾選
      return row.falg
    }
  }
}
</script>

5. 表格設(shè)置跨分頁(yè)勾選數(shù)據(jù)

在實(shí)際工作中經(jīng)常會(huì)有需求，在第一頁(yè)勾選幾條數(shù)據(jù)，翻到第二頁(yè)勾選，然后再返回第一頁(yè)查看，希望第一頁(yè)勾選的數(shù)據(jù)依舊是勾選狀態(tài)。在Table組件中可以通過(guò)設(shè)置type=selection列的reserve-selection屬性為true和table指定row-key屬性來(lái)控制，注意：row-key屬性接收一個(gè)函數(shù)，函數(shù)返回值必須是列表數(shù)據(jù)中唯一的字段(一般使用id)。

<template>
  <el-table
    ref="costomTable"
    :data="tableData"
    style="width: 100%"
    :row-key="row => row.id"
  >
    <el-table-column
      type="selection"
      width="55"
      :reserve-selection="true"
      >
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: []
    }
  }
}

6. 表單禁止輸入空格

• 方式1：使用trim去除輸入框前后空格，中間空格會(huì)保留

<el-input
  type="text"
  v-model.trim="formData.name"
  placeholder="輸入姓名"
/>

• 方式2：使用正則替換

<el-input
  type="text"
  v-model="formData.name"
  placeholder="輸入姓名"
  @input="formData.name = formData.name.replace(/\s+/g,'')"
/>

• 方式3：使用原生鍵盤(pán)事件禁止輸入空格

/* 示例為Element UI 的可下拉和輸入篩選，同時(shí)支持輸入新增組件*/
<el-select
  v-model="form.invoiceType"
  placeholder="請(qǐng)選擇開(kāi)票類(lèi)型"
  clearable
  filterable
  allow-create
  @keydown.native="handleOnKeyDown($event)"
  >
  <el-option v-for="item in invoiceTypeOptions" :label="item" :value="item" clearable :key="item" />
</el-select>
...
handleOnKeyDown(e) {
  // 禁止輸入空格
  if(e.keyCode == 32){
    e.returnValue = false
  }
}

7. 日期組件設(shè)置禁選時(shí)間

日期組件可以通過(guò)設(shè)置picker-options屬性來(lái)控制禁選時(shí)間。

 <el-date-picker
    v-model="form.belongDatePeriod"
    type="daterange"
    align="left"
    range-separator="-"
    start-placeholder="開(kāi)始日期"
    end-placeholder="結(jié)束日期"
    value-format="yyyy-MM-dd"
    :clearable="false"
    :editable="false"
    :picker-options="pickerOptions"
  >
  </el-date-picker>
  ......
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return setDatePickerDisableAfterDate(
            time,
            `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`
          )
        }
      },
    }
  },
  methods: {
    setDatePickerDisableAfterDate (time, pickerTime)  {
      // 獲取指定時(shí)間點(diǎn)的年月日
      const date = new Date(pickerTime)
      const year = date.getFullYear() // 年
      let month = date.getMonth() + 1 // 月
      let day = date.getDate() // 日
      // 如果是1-9月需要在前面補(bǔ)0
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (day >= 1 && day <= 9) {
        day = '0' + day
      }
      // 獲取到的指定時(shí)間的年月日就是：
      const pointDate = year.toString() + month.toString() + day.toString()

      // 獲取時(shí)間選擇器的年月日
      const pickerYear = time.getFullYear()
      let pickerMonth = time.getMonth() + 1
      let pickerDay = time.getDate()
      if (pickerMonth >= 1 && pickerMonth <= 9) {
        pickerMonth = '0' + pickerMonth
      }
      if (pickerDay >= 1 && pickerDay <= 9) {
        pickerDay = '0' + pickerDay
      }
      const pickerDate = pickerYear.toString() + pickerMonth.toString() + pickerDay.toString()
      // 為true的時(shí)間就不能選
      return pickerDate >= pointDate
    }
  }

8. 輸入框禁止自動(dòng)填充賬號(hào)密碼

在el-input中，瀏覽器會(huì)自動(dòng)將已保存的賬號(hào)密碼填充到type為password的輸入框中，當(dāng)不需要時(shí)可以設(shè)置autocomplete="new-password

<el-input
    v-model="formData.password"
    show-password
    placeholder="請(qǐng)輸入密碼"
    style="width: 240px"
    clearable
    autocomplete="new-password"
  ></el-input>

9. 表單校驗(yàn)參入業(yè)務(wù)邏輯

• 正則校驗(yàn)使用pattern屬性，業(yè)務(wù)邏輯校驗(yàn)使用validator屬性。
• 如果是動(dòng)態(tài)控制字段是否必填，可以在validator中根據(jù)業(yè)務(wù)進(jìn)行控制

formRules: {
  amount: [
    {
      required: true,
      message: '請(qǐng)輸入金額',
      trigger: 'blur'
    },
        // 正則校驗(yàn) 
        {
            pattern: new RegExp(/^[0-9]+$/),
             message: '金額只能輸入數(shù)字'
        },
    {
            // 這里不是箭頭函數(shù)，獲取不到數(shù)據(jù)
      validator(rule, value, cb) {
        if (Number(value) === 0) {
          cb(new Error(`輸入金額不能為0`))
        } else {
          cb()
        }
      }
    },
    {
            // 要使用箭頭函數(shù)，才可以獲取到this.formData.balance
      validator: (rule, value, cb) => {
        Number(value) > Number(this.formData.balance) ? cb('輸入金額不能大于可用余額') : cb()
      }
    }
  ]
}

注意：validator一定要使用箭頭函數(shù)，否則通過(guò)this獲取不到狀態(tài)數(shù)據(jù)

10. 自定義組件觸發(fā)當(dāng)前表單項(xiàng)校驗(yàn)

el-form中自定義組件的表單項(xiàng)如果想要借助el-form的表單校驗(yàn)，那么對(duì)業(yè)務(wù)邏輯的校驗(yàn)可以在rules中對(duì)應(yīng)字段的validator 中控制，那么如何觸發(fā)對(duì)應(yīng)表單項(xiàng)的校驗(yàn)?zāi)兀恳簿褪钦f(shuō)我的自定義組件符合數(shù)據(jù)要求了，我怎么告訴el-form-item進(jìn)行校驗(yàn)? element中el-input是通過(guò)blur觸發(fā)，el-select是通過(guò)change觸發(fā)，那么自定義組件可以通過(guò)如下方式：

// 觸發(fā)當(dāng)前字段的校驗(yàn)
this.$refs.form.validateField('authFiles')

觸發(fā)時(shí)機(jī)可以自己控制：

• 監(jiān)聽(tīng)自定義組件綁定的數(shù)據(jù)發(fā)生變化時(shí)
• 接收到自定義組件派發(fā)事件

11. *el-upload上傳文件時(shí)，不觸發(fā)onchange方法

el-upload上傳文件時(shí)，只能上傳一個(gè)文件，將limit設(shè)為1，但是這個(gè)文件不符合上傳要求上傳不成功時(shí)，第二次點(diǎn)擊上傳時(shí)不觸發(fā)on-change方法

原因是：上傳一次el-upload組件的uploadFiles屬性中就會(huì)添加進(jìn)去一次，當(dāng)limit和uploadFiles的length屬性一致時(shí)就不會(huì)觸發(fā)on-change方法。

解決辦法：

// 刪除第一個(gè)
this.$refs.uploadFile.uploadFiles.shift();
// 或者上傳沒(méi)校驗(yàn)通過(guò)時(shí)調(diào)用handleRemove方法刪除當(dāng)前上傳的文件
this.$refs.uploadFile.handleRemove(file)
// 或者直接調(diào)用clearFiles方法直接清空uploadFiles
this.$refs.uploadFile.clearFiles()

以上方法均可，根據(jù)需求選用。