vue——筆記

vue——筆記

原創

2020-07-06 13:11

1、前端取到數組以後只需要取數組裏的某一個值，
遍歷數組

//遍歷數組dataForm
 let data = this.dataForm.map(c => {
		return parseInt(c.id);     //BigDecimal類型轉換爲Int類型
});

2.級聯選擇器點擊重置按鈕清空已選擇的內容（如圖所示效果）

 <el-cascader
                                v-model="id"
                                :props="defaultParams"
                                :options="options"
                                placeholder="請選擇"
                                @change="handleChange">
                        </el-cascader>

當選中節點變化時觸發handleChange方法

handleChange(id) {
            id= id[id.length-1];  //取數組的最後一位
        },

下面是重置清空的方法

 _reset() {
            //清空查詢條件
            this.id = [];
        },

關鍵是一定要寫v-model,然後將綁定的v-model清空就行。

ElementUi 表格取消全選框（效果如圖）

 <el-table
                            ref="multipleTable"
                            :data="page.records"
                            highlight-current-row
                            @current-change="handleCurrentChange"
                            @selection-change="selectionChangeHandle"
                            :row-class-name="tableRowclassName"
                            :header-cell-class-name="cellClass"
                            height="220" style=" margin-top:20px; width:99%;"
                    >
                        <el-table-column  type="selection"  width="100"  ></el-table-column>
                        <el-table-column label="電纜線名稱" prop="name" width="150"></el-table-column>
                        <el-table-column label="所屬線路" prop="feederName"></el-table-column>
                        <el-table-column label="長度(m)" prop="length"  width="100"></el-table-column>
                    </el-table>

具體實現方法，這個方法主要就是給表格所需要的列添加類名
（cellClass()方法主要給複選框那一列添加類名爲 ‘disabledCheck’）

<el-table  :header-cell-class-name="cellClass"></el-table>
cellClass(row){     
    if (row.columnIndex === 0) {           
     return 'disabledCheck'     
    } 
},

CSS樣式設置如下

/* 去掉全選按鈕 */
.el-table .disabledCheck .cell .el-checkbox__inner{
    display: none !important;
}

.el-table .disabledCheck .cell::before{
    content: '選擇';
    text-align: center;
    line-height: 37px;
}

原文鏈接來自：https://www.cnblogs.com/JinXinYuan/p/12165027.html

4.elementui帶單選框的表格
https://www.cnblogs.com/calamus/p/8569196.html

https://www.jianshu.com/p/63d70324abfc

5.elementui表格使用checkbox實現單選效果

https://blog.csdn.net/qq_36718999/article/details/92773919

6.element-ui的table表格的多選框默認選中
https://blog.csdn.net/u010007013/article/details/97828405

7.element-ui trr樹形結構點擊當前背景再點擊其它地方會消失問題解決，以及修改當前背景色。

https://blog.csdn.net/weixin_44903107/article/details/105513492

8.前端Vue中常用rules校驗規則

https://www.cnblogs.com/lieone/p/11856330.html