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清空就行。
3、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
9、elementUI属性:
1)table 表格中参数过长省略并且提示显示:
:show-overflow-tooltip=“true” 或者 show-overflow-tooltip