el-table 的样式问题

<template>
  <div id="model" style="background: #fff;">
    <el-dialog
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="50%"
      @close="handleClose"
    >
      <div class="title">这是一个自定义标题</div>
      <el-table :data="tableData" border   header-row-class-name="header_row_style" highlight-current-row style="width: 100%;margin-top:20px;">
        <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
        <el-table-column prop="date" label="日期" width="180" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
        <el-table-column prop="address" label="地址" align="center"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
  
</template>

<script>
export default {
  props: {
    // value: {  // 用 props 传递控制弹框显示的状态
    //   type: Boolean,
    //   default: false
    // }
  },
  data() {
    return {
      dialogVisible: true,
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
    };
  },
  watch: {
    // value(newVal) {
    //   this.dialogVisible = newVal;
    // },
    // dialogVisible(newVal) {
    //   this.$emit('update:value', newVal);  // 向父组件传递状态
    // }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
      // this.$emit('update:value', this.dialogVisible);
      this.$emit('closeSport')
    },
    openDialog() {
      debugger
      this.dialogVisible = true;
      // this.$emit('dialog-opened', this.dialogVisible); 
    },
  }
};
</script>
<style>
.header_row_style{
  background:  linear-gradient(90deg,rgba(26,131,201,0.14), #2e8fe4 46%, rgba(26,131,201,0.14) 98%);
  color:#fff;
}
</style>
<style scoped>
.title{
  color:#fff !important;
  width:300px;
  height:50px;
  position: absolute;
  top:2vh;
  display: flex;
  align-items: center;
  font-size:20px;
  padding-left:5vh;
  background: url('~@/assets/szpage/modal_tip.png') no-repeat !important;
  background-size: 100% 100% !important;
}
/* table的样式 */
/* 除了表头背景的颜色 */
/deep/.el-table tr{
  background-color: #0c1c48 !important;
}
/* 除了表头的字体颜色 */
/deep/.el-table{
  color:#fff !important;
  /* border-color: #c1e61ecc !important; */
}
/* 选中背景的颜色 */
/deep/.el-table__body tr.current-row>td.el-table__cell, .el-table__body tr.selection-row>td.el-table__cell{
  background-color:#3265a1 !important ;
}
/* 鼠标悬停背景的颜色 */
/deep/.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
   background-color:#3265a1 !important ;
}
/* 表头的字体颜色 */
/deep/.el-table thead{
  color:#fff !important;
}
/* 表头的背景颜色 */
/deep/.el-table th.el-table__cell{
  background-color: transparent !important;
  }
/* 表格的边框颜色 */
/* 在你的组件的<style>标签中或者单独的CSS文件中 */
::v-deep.el-table th.is-leaf {
  border-color: #1F3877 !important;
}
::v-deep.el-table td {
  border-color: #1F3877;
}
::v-deep .el-table--group{
  border: 0.1px solid #1F3877 !important;
}
::v-deep .el-table--border {
  border: 0.1px solid #1F3877 !important;
}
::v-deep.el-table--border:after,
.el-table--group:after,
.el-table:before {
    background-color: #1F3877;
}
 
::v-deep.el-table--border th,
.el-table--border th.gutter:last-of-type {
     border-color:  #1F3877;
}
 
::v-deep.el-table--border td,
.el-table--border th {
     border-color:  #1F3877;
}

/* // dialog 的样式 */
/deep/ .el-dialog{
  background: url('~@/assets/szpage/modal_bg.png') no-repeat !important;
  background-size: 100% 100% !important;
  height:600px;
}
/deep/.el-dialog__title{
  color:#fff !important;
  background: url('~@/assets/szpage/modal_tip.png') no-repeat !important;
  background-size: 100% 100% !important;
}
/deep/ .el-dialog__body{
  color:#fff !important;
}
/deep/.el-dialog__headerbtn .el-dialog__close{
  color:#fff !important;
}
/deep/ .el-dialog__headerbtn{
  top:4px !important;
  right:8px !important;
  font-size: 25px !important;
}
</style>