文本溢出隐藏+hover时默认显示完整内容
- :content=“name”
- text-overflow: ellipsis;
<el-tooltip class="item" effect="dark" :content="name" placement="top">
<span class="header-ellipsis"> {{ name }}</span>
</el-tooltip>
.header-ellipsis {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 230px;
display: inline-block;
}
table边框合并
<table border="1" cellspacing="0"></table>
table, td{
border: 1px solid #000000;
border-collapse: collapse;
}
input去掉边框
<input type="text" name="" class="myttpp">
.myttpp{
border: none;
background: #ccc;
}
渐变色写法
属性值 | 方向 |
---|---|
to top | 从下到上 |
to right | 从左到右 |
to bottom | 从上到下 |
to left | 从右到左 |
background:linear-gradient(方向,开始颜色,结束颜色);
鼠标hover显示与隐藏
<div class="father">
<div class="child "></div>
</div>
.father .child {
display: none;
}
.father:hover .child {
display: block;
}
vue如何关闭eslint检测
vue.config.js文件
module.exports = {
lintOnSave: false
},
el-table 前端搜索
<el-table
:cell-style="{ textAlign: 'center' }"
height="650"
:header-cell-style="{ background: '#d6e9fa', color: '#1f2021', textAlign: 'center' }"
ref="multipleTable"
:data="tables[0].slice((currentPage - 1) * pageSize, currentPage * pageSize)"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
>
</el-table>
computed: {
tables() {
const search = this.searchContent
//当将input框清空时,使列表自动展示搜索前的完整数据,并返回至首页,防止叠加搜索
if (this.inputContent == '') {
this.searchContent = ''
this.currentPage = 1
return [this.tableData, (this.count = this.tableData.length)]
}
if (search !== '') {
return [
this.tableData.filter(dataNews => {
return Object.keys(dataNews).some(key => {
return (
String(dataNews[key])
.toLowerCase()
.indexOf(search) > -1
)
})
}),
(this.count = this.tableData.filter(dataNews => {
return Object.keys(dataNews).some(key => {
return (
String(dataNews[key])
.toLowerCase()
.indexOf(search) > -1
)
})
}).length)
]
}
return [this.tableData, (this.count = this.tableData.length)]
}
},