五、element设置表格el-table表头的颜色
使用header-cell-style可以修改它 的背景及其他
<!--内容表格-->
<el-table
:data="tableData"
border
:header-cell-style="{background:'#000', color:'#fff'}"
style="width: 95%;margin: 40px;">
效果如下:
六、element-ui 表格的某一列的字段字体变颜色2种方法
方法①: :cell-style=“cellStyle”
//修改单元格样式的方法
cellStyle(row, column, rowIndex, columnIndex){
if (row.row.errorMsg == "已存在相同记录"){
if (row.columnIndex === 3){
return 'color: red'
}
}
},
方法② 用卡槽的方法去解决
<el-table-column label="ciName" prop="ciName" width="180" show-overflow-tooltip>
<template slot-scope="scope">
<span v-if="scope.row.errorMsg" style="color: red">{
{scope.row.ciName}}</span>
<span v-else>{
{scope.row.ciName}}</span>
</template>
</el-table-column>
效果如下:
注: 表格数据在渲染的时候, 建议使用深拷贝的方法,赋值一下。否则会出现,表格数据更新延迟。 深拷贝方法: this.excelData = JSON.parse(JSON.stringify(this.excelData));
七、vue项目控制台报警告:
sockjs.js?9be2:2999 WebSocket connection to ‘ws://localhost:8083/sockjs-node/264/g0wa1uvw/websocket’ failed: WebSocket is closed before the connection is established
解决办法:webpack热部署导致的问题
注释掉
node_modules\sockjs-client\dist\sockjs.js
里面
1604行这个就可以了
八、element中table单元格添加tooltip 并且根据后台返回的数据判断,tooltip是否显示
废话不多说,直接贴代码:
<el-table-column label="ciName" prop="ciName" width="180">
<template slot-scope="scope">
<el-tooltip placement="top" effect="light" v-if="scope.row.errorMsg">
<div style="color:red">{
{scope.row.ciName }}</div>
<div slot="content" style="color:red">{
{
**真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲**
**详情关注公中号【编程进阶路】**
scope.row.errorMsg}}</div>
</el-tooltip>
<div v-else>{
{scope.row.ciName }}</div>
</template>
</el-table-column>
分析: 这种一般肯定用的卡槽的方法显示数据,slot-sope
可以把条件写在 el-tooltip 标签里面 v-if
然后还要一个 v-else 不需要 el-tooltip 的,只显示数据的。
九、elment-ui 搜索条件太多,可以做一个收起/展开的功能,比较好
先上效果图:
展开:
收起:
代码如下:
<a style="margin-left:10px" @click="toggleAdvanced">
{
{ advanced ? '收起' : '展开'}}
<i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down' "></i>
</a>
在你要隐藏的部分加上 v–show=“advanced"
<el-row :gutter="24" v-show="advanced">
要隐藏的内容。。。
</el-row>
js 定义变量: advanced: false, //展开/收起
方法:
// 展开/收起
toggleAdvanced(){
this.advanced = !this.advanced;
},
十、elment-ui 表格数, 默认是第一列展开的,我想从第二列开始,
解决办法:只需要:你把第一列的el-table-column的type设置为type=“”,下拉就到第二列去了
十一、element-ui el-radio-group for循环时取值,老是label的值???
错误写法:
<el-radio-group v-model="formData.type" @change="onChangeType">
### 最后
喜欢的话别忘了关注、点赞哦~
> ![前端校招面试题精编解析大全](https://img-blog.csdnimg.cn/img_convert/8c2b6497eec78b688390f85749032a70.png)