element-ui el-dialog嵌套table組件,ref問(wèn)題及解決
element-ui el-dialog嵌套table組件,ref問(wèn)題
項(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àn)問(wèn)題總結(jié)
ps: 以下改變element-ui默認(rèn)的樣式時(shí)都不能加scoped，可以加一個(gè)唯一前綴避免污染全局樣式
改變默認(rèn)樣式都可以通過(guò)打開(kāi)控制臺(tái)查看層級(jí)和類(lèi)名進(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)合并后某一行高度撐開(kāi))
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]
? ? ?}
? ?}
?},從需求的最后一行開(kāi)始向上合并可以解決這個(gè)問(wèn)題
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;
}通過(guò)方法改變(更靈活，可以分開(kāi)操作不同列的表頭)
<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. 改變輸入框的大小高度尺寸
通過(guò)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>
通過(guò)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)名稱(chē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'
? }]
}
el-dialog對(duì)話(huà)框內(nèi)嵌自定義內(nèi)容的樣式更改
ps: 嵌套在表格中的對(duì)話(huà)框無(wú)法打開(kāi)可以添加:append-to-body="true"顯示
title文字
.el-dialog__title{
? ? somestyle
? }header
.el-dialog__header {
?? ?somestyle
? }content
.el-dialog__body{
? ? somestyle
? }footer
.el-dialog__footer{
?? ?somestyle
? }整體內(nèi)容
.el-dialog{
?? ?somestyle
}ps：再重申一次，改變element-ui的默認(rèn)樣式時(shí)不能添加scoped進(jìn)行限制，并且應(yīng)該自定義唯一前綴來(lái)避免污染全局樣式
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn)
今天小編就為大家分享一篇vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue draggable實(shí)現(xiàn)從左到右拖拽功能
這篇文章主要為大家詳細(xì)介紹了Vue draggable實(shí)現(xiàn)從左到右拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue如何監(jiān)聽(tīng)頁(yè)面緩存事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue部署到域名二級(jí)目錄刷新404的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
如何在Vue和Spring?boot之間實(shí)現(xiàn)前后端連接
最近搭建一個(gè)Springboot+vue前后端分離項(xiàng)目,真的很簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于如何在Vue和Spring?boot之間實(shí)現(xiàn)前后端連接的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
element?ui時(shí)間日期選擇器el-date-picker報(bào)錯(cuò)Prop?being?mutated:"
在日常開(kāi)發(fā)中,我們會(huì)遇到一些情況,限制日期的范圍的選擇,下面這篇文章主要給大家介紹了關(guān)于element?ui時(shí)間日期選擇器el-date-picker報(bào)錯(cuò)Prop?being?mutated:?"placement"的解決方式,需要的朋友可以參考下2022-08-08
本文主要介紹了vue中使用詞云圖的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
解決element?ui?cascader?動(dòng)態(tài)加載回顯問(wèn)題
這篇文章主要介紹了element?ui?cascader?動(dòng)態(tài)加載回顯問(wèn)題解決方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
vue如何限制只能輸入正負(fù)數(shù)及小數(shù)
這篇文章主要介紹了vue如何限制只能輸入正負(fù)數(shù)及小數(shù),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
vue+elementUi中的table實(shí)現(xiàn)跨頁(yè)多選功能(示例詳解)
最近在開(kāi)發(fā)工業(yè)品超市的后臺(tái)系統(tǒng),遇到一個(gè)需求,就是實(shí)現(xiàn)在一個(gè)table表格中多選數(shù)據(jù),在網(wǎng)上查了好多,有些方法真的是無(wú)語(yǔ),下面通過(guò)本文給大家分享vue+elementUi中的table實(shí)現(xiàn)跨頁(yè)多選功能,感興趣的朋友跟隨小編一起看看吧2024-05-05