el-table修改表头 多选时修改表头 自定义表头报错

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 = '自定义列名'
        }
    }

结果：

完工