腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

element-ui el-dialog嵌套table組件,ref問題及解決

更新時(shí)間：2023年02月12日 14:13:32 作者：wo_dxj

這篇文章主要介紹了element-ui el-dialog嵌套table組件,ref問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

element-ui el-dialog嵌套table組件,ref問題

項(xiàng)目中有個(gè)需求

彈窗顯示的時(shí)候，返現(xiàn)數(shù)據(jù)需要選中，看了elementui table組件中的方法

傳入需要需要選中的行和是否選中的狀態(tài)，調(diào)用的時(shí)候肯定是需要增加ref的

this.$refs.moviesTable.toggleRowSelection(this.$refs.moviesTable.data[想要選中行的下標(biāo)],true)

但是在彈窗顯示的時(shí)候這樣用，會(huì)報(bào)錯(cuò)，（this.$refs.moviesTable為undefined）

解決辦法

使用替換$nextTick

companyChange 彈窗顯示的方法，selectArr 是需要選中的數(shù)據(jù)數(shù)組，tableData是列表數(shù)據(jù)

vue組件庫(kù) element-ui常見問題總結(jié)

ps: 以下改變element-ui默認(rèn)的樣式時(shí)都不能加scoped，可以加一個(gè)唯一前綴避免污染全局樣式

改變默認(rèn)樣式都可以通過打開控制臺(tái)查看層級(jí)和類名進(jìn)行更改

el-table相關(guān)

1. 改變hover時(shí)表格的背景顏色

? .el-table .el-table__body-wrapper .el-table__body tr.el-table__row:hover > td{
? ? ? background-color: #ffffff !important;
? }
? //less預(yù)處理器
? .el-table--enable-row-hover{
? ? ? .el-table__body{
? ? ? ? tr:hover>td{
? ? ? ? ? background-color: #ffffff !important;
? ? ? ? }
? ? ? }
? ? }

2. 改變表格表頭高度及樣式

.el-table__header tr,.el-table__header th {
? ? ? padding: 0;
? ? ? height: 40px;
? }

3. 改變表格內(nèi)容高度及樣式

.el-table__body tr,.el-table__body td {
? ? ? height: 60px;
}

4. 改變加邊框表格的邊框顏色

.el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group{
? ? border-color: #BFBFBF;
}

可以自行添加hover時(shí)的顏色

5. 表格的多行合并(避免出現(xiàn)合并后某一行高度撐開)

arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
? if (columnIndex === 0 || columnIndex === 1 || columnIndex === 4) {
? ? ?if (rowIndex % this.gridData.length === 0) {
? ? ? ?return [this.tableData.length, 1]
? ? ?} else {
? ? ? ?return [0, 0]
? ? ?}
? ?}
?},

從需求的最后一行開始向上合并可以解決這個(gè)問題

6. 改變表格表頭樣式的幾種方法

直接添加header-cell-style

<el-table
?v-loading="loading"
?@row-click="rowMeth"
?:data="this.isSearched ? this.searchedData : this.tableData"
?style="width: 100%"
?:header-cell-style="{'color':'#606266','backgroundColor':'#F5F5F5','font-size':'13px','font-weight':500}"
?@selection-change="handleSelectionChange"
>

CSS樣式(不能添加scoped)

.el-table__header tr,.el-table__header th {
? ? padding: 0;
? ? height: 40px;
}

通過方法改變(更靈活，可以分開操作不同列的表頭)

<el-table
? ? ?ref="multipleTable"
? ? ?:data="tableDatas.docList"
? ? ?tooltip-effect="dark"
? ? ?style="width: 100%"
? ? ?:header-cell-style="getRowClass"
? ? ?@selection-change="handleSelectionChange"
>

// js方法
getRowClass({ row, column, rowIndex, columnIndex }) {
? ? ? if (rowIndex === 0 && columnIndex === 0) {
? ? ? ? return "background-color:#E8E9EA;font-size:13px;border-top-left-radius: 5px";
? ? ? }
? ? ? if (rowIndex === 0 && columnIndex === 5) {
? ? ? ? return "background-color:#E8E9EA;color:#606266;border-top-right-radius: 5px ";
? ? ? }
? ? ? if (rowIndex === 0 && columnIndex === 1) {
? ? ? ? return "background-color:#E8E9EA;color:#303133;";
? ? ? }
? ? ? if (rowIndex === 0 && 1 < columnIndex < 5) {
? ? ? ? return "background-color:#E8E9EA;color:#606266";
? ? ? }
? ? },

7. 添加表格外邊框

.el-tabs .payContent .el-table {
? border-right: 1px solid #e8e9ea;
? border-left: 1px solid #e8e9ea;
? border-radius: 5px;
? margin-top: 20px;
}

payContent 為唯一前綴，避免去除scoped后污染全局樣式

8. 點(diǎn)擊獲取某一行的數(shù)據(jù)

綁定row-click

<el-table
?v-loading="loading"
?@row-click="rowMeth"
?:data="this.isSearched ? this.searchedData : this.tableData"
?style="width: 100%"
?:header-cell-style="{'color':'#606266','backgroundColor':'#F5F5F5','font-size':'13px','font-weight':500}"
?@selection-change="handleSelectionChange"
>
// js
rowMeth (row, column, event) {
? ? console.log(row)
},

el-form 表單相關(guān)

1. 改變輸入框的大小高度尺寸

通過element自帶的size屬性進(jìn)行更改

<el-input
? placeholder="請(qǐng)輸入內(nèi)容"
? suffix-icon="el-icon-date"
? v-model="input1">
</el-input>
<el-input
? size="medium"
? placeholder="請(qǐng)輸入內(nèi)容"
? suffix-icon="el-icon-date"
? v-model="input2">
</el-input>

通過css自行定義寬高

.inputClass {
? ?.el-input__inner {
? ? ?width: 240px;
? ? ?height: 40px;
? ?}
?}

inputClass 為避免污染全局樣式的唯一前綴

2. element表單驗(yàn)證

<el-form :inline="true" :model="formData" :rules="rules" ?ref="ruleForm1">
// js
rules: {
? name: [
? ? { required: true, message: '請(qǐng)輸入活動(dòng)名稱', trigger: 'blur' },
? ? { min: 3, max: 5, message: '長(zhǎng)度在 3 到 5 個(gè)字符', trigger: 'blur' }
? ],
? region: [
? ? { required: true, message: '請(qǐng)選擇活動(dòng)區(qū)域', trigger: 'change' }
? ]
}

自定義驗(yàn)證規(guī)則

rules: {
? age: [{
? ? validator: (rule, value, callback) => {
? ? ? if (value !== '') {
? ? ? ? if ((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) === false) {
? ? ? ? ? callback(new Error('請(qǐng)輸入數(shù)字'))
? ? ? ? } else {
? ? ? ? ? callback()
? ? ? ? }
? ? ? } else {
? ? ? ? callback()
? ? ? }
? ? },
? ? type: 'number',
? ? trigger: 'change'
? }]
}