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ù)需求選用。