el-table修改表头 自定义表头报错 多选时删除表头 修改表头
参考element文档 自定义表头 会报错
error: ‘scope’ is defined but never used (vue/no-unused-vars) at xxxxxx
<template slot="header" slot-scope="scope">
<el-input
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
一模一样的代码也会报错,好像是啥啥啥版本不对
解决方法:
在报错的这行代码上加行注释,取消eslint规范检索,就可以运行了
例:
<!-- eslint-disable-next-line -->
<template slot="header" slot-scope="slot">
标题1
</template>
完工
但是 如果你想用这种方法修改多选表格的列名 这样就啥也没用
令多选表格 多选列列名为空
如果你是单纯的不要表头上这个框框 让这一列的列名显示为空
那先给他设置一个className,然后令他display:none;就可以了
刚好el-table有一个属性:
header-cell-class-name 表头单元格的 className 的回调方法,也可以使用字符串为所有表头单元格设置一个固定的 className。
例:
<el-table
:data="researchCenterData"
:header-cell-class-name="cellClass"
border
style="width: 100%"
>
//给第一列的列名加个class,名叫noneSelectHeader
cellClass(row) {
if (row.columnIndex === 0) {
return 'noneSelectHeader'
}
},
接着 令他隐藏
// 打钩表头隐藏
.el-table .noneSelectHeader .cell {
.el-checkbox {
display: none;
}
}
完工
令多选表格 多选栏 的列名改为自定义列名
那就直接修改dom结构吧
<el-table
ref="multipleTable"
:data="researchCenterData"
:header-cell-class-name="cellClass"
border
style="width: 100%"
>
<el-table-column type="selection" width="147">
</el-table-column>
<el-table-column></el-table-column>
<el-table-column></el-table-column>
</el-table>
date(){
return {
researchCenterData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}
]
}
created() {
//选中表格的第2行第三行
this.toggleSelection([
this.researchCenterData[1],
this.researchCenterData[2]
])
},
methods: {
toggleSelection(rows) {
this.$nextTick(function() {
//选中的那几行打钩
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row)
})
} else {
//没有数据就不打钩
this.$refs.multipleTable.clearSelection()
}
this.addHeader()
})
},
//给第一列的列名加个class,名叫noneSelectHeader
cellClass(row) {
if (row.columnIndex === 0) {
return 'noneSelectHeader'
}
},
addHeader() {
//找到第一列的<div class="cell"><div>这个节点令他变为<div class="cell">自定义列名<div>
var headerDom = document.getElementsByClassName('noneSelectHeader')
var needDom = headerDom[0].firstChild
needDom.innerHTML = '自定义列名'
}
}
结果:
完工