elementUI table表头高度太宽了怎么调整

Question

表头超级宽,而且网上的方法试过了之后都没有什么用,有人直到这是什么原因吗?

<template>
  <el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%;"
    row-style="height:80px"
  class="eltable">
    <el-table-column
      label="Date"
      prop="date">
    </el-table-column>
    </el-table>
</template>

<script>
  import 'element-ui/lib/theme-chalk/index.css'
    export default {
        name: "test",
      data() {
        return {
          tableData: [{
            date: '2016-05-02',

          }, {
            date: '2016-05-04',

          }, {
            date: '2016-05-01',

          }, {
            date: '2016-05-03',
           
          }],
          search: ''
        }
      },
      methods: {
        handleEdit(index, row) {
          console.log(index, row);
        },
        handleDelete(index, row) {
          console.log(index, row);
        }
      },
    }
</script>

<style scoped>

</style>

Answer 1

你可以查看表头的样式，比如样式是 class=“table_head” 你可以使用

div /deep/ .table_head { height: 'xx' ...}  // div是表头的父元素（前辈元素都可以） ，也可以使用id或者class名

Answer 2

试好久，这样可以缩小
是那个 <el-container> 布局容器中的<el-main>Main</el-main>的原因 ， 设置

//原始：
.el-main {
    background-color: #e9eef3;
    color: #333;
    /* text-align: center; */
    line-height: 461;
}
//修改：
.el-main {
    background-color: #e9eef3;
    color: #333;
    /* text-align: center; */
    line-height: 20px !important;
}

Answer 3

我也遇到这个问题了，我在index.html中添加了样式，如图：
，希望能够帮到你