干净的table表格 vue element

<template>
  <el-dialog center
             :visible.sync="visible"
             customClass="dl"
             :show-close="false"
             :close-on-click-modal="false"
             :close-on-press-escape="true"
             width="84%">
    <el-form :ref="formRefName" :model="form">
      <div style="overflow-y: auto;overflow-x: hidden">
        <el-row :gutter="24">
          <el-col :span="30">
            <div style="height: 100%" ref="imageDom1">
              <table cellpadding="0" cellspacing="0" class="rm_table1">
                <tr>
                  <td style="font-weight: bold;font-size: 25px" colspan="15" align="center">{{batch === 1 ? '提 前 批 方 案' : '常 规 批 出 分 方 案'}}</td>
                </tr>
                <tr>
                  <td class="table1_w1 tdBg textAlign">
                    学校代码
                  </td>
                  <td class="table1_w2 tdBg textAlign">
                    学校名称
                  </td>
                  <td class="table1_w1 tdBg textAlign">
                    211
                  </td>
                  <td class="table1_w1 tdBg textAlign">
                    985
                  </td>
                  <td class="table1_w1 tdBg textAlign">
                    双一流
                  </td>
                  <td class="table1_w5 tdBg textAlign">
                    专业名称
                  </td>
                  <td class="table1_w1 tdBg textAlign">
                    选科要求
                  </td>
                  <td class="table1_w2 tdBg textAlign">
                    城市
                  </td>
                  <td class="table1_w5 tdBg textAlign">
                    特色专业
                  </td>
                  <td class="table1_w5 tdBg textAlign">
                    学科评估
                  </td>
                  <td class="table1_w1 tdBg textAlign">
                    计划数
                  </td>
                  <td class="table1_w1 tdBg textAlign">
                    预估位次
                  </td>
                  <td class="table1_w5 tdBg textAlign">
                    推荐理由
                  </td>
                </tr>
                <template v-for="(item) in form">
                   <tr>
                    <td class="inputDeep" align="center" style="background-color: #e1f3d8">
                      {{item.code}}
                    </td>
                    <td class="inputDeep" style="overflow: hidden;background-color: #e1f3d8">
                     {{item.uname}}
                    </td>
                    <td v-if="item.f211 === 1" class="inputDeep" align="center" style="overflow: hidden;color: #bc1e21;background-color: #e1f3d8">
                      {{item.f211Des}}
                    </td>
                     <td v-else class="inputDeep" align="center" style="overflow: hidden;background-color: #e1f3d8">
                       {{item.f211Des}}
                     </td>
                    <td v-if="item.f985 === 1" class="inputDeep" align="center" style="overflow: hidden;color: #bc1e21;background-color: #e1f3d8">
                      {{item.f985Des}}
                    </td>
                     <td v-else class="inputDeep" align="center" style="overflow: hidden;background-color: #e1f3d8">
                       {{item.f985Des}}
                     </td>
                    <td v-if="item.fdual === 1" class="inputDeep" align="center" style="overflow: hidden;color: #bc1e21;background-color: #e1f3d8">
                      {{item.fdualDes}}
                    </td>
                     <td v-else class="inputDeep" align="center" style="overflow: hidden;background-color: #e1f3d8">
                       {{item.fdualDes}}
                     </td>
                     <td class="inputDeep" style="overflow: hidden;background-color: #e1f3d8">
                        {{item.mname}}
                     </td>
                    <td class="inputDeep" style="overflow: hidden;background-color: #e1f3d8">
                      {{item.require}}
                    </td>
                    <td class="inputDeep" style="overflow: hidden;background-color: #e1f3d8">
                      {{item.city}}
                    </td>
                     <td class="inputDeep" style="overflow: hidden;background-color: #e1f3d8">
                       {{item.tese_zhuanyeDes}}
                     </td>
                     <td class="inputDeep" style="overflow: hidden;background-color: #e1f3d8">
                       {{item.xueke_pingguDes}}
                     </td>
                     <td class="inputDeep" align="center" style="overflow: hidden;background-color: #e1f3d8">
                       {{item.jihuashu}}
                     </td>
                     <td class="inputDeep" align="center" style="overflow: hidden;background-color: #e1f3d8">
                       {{item.rank}}
                     </td>
                     <td class="inputDeep" style="overflow: hidden">
                       {{item.low_reasonDes}}
                     </td>
                  </tr>
                </template>
              </table>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <div slot="footer">
      <el-button @click="closeWin">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {mapGetters} from 'vuex'
import Api from '@/api'
import manageOptionsMixin from '@/view/main/manage/manageOptionsMixin'
import dialogFormMixin from '@/components/dialogFormMixin'
import html2canvas from 'html2canvas'
export default {
  name: 'doc',
  mixins: [manageOptionsMixin, dialogFormMixin],
  data () {
    return {
      formRefName: 'form',
      subStrArr: [],
      scoresFinish: undefined,
      batch: '',
      stuInfo: '',
      form: {}
    }
  },
  computed: {
    ...mapGetters(['hasRoleAdmin'])
  },
  methods: {
    initShow (stuInfo, batch) {
      this.form = {}
      this.visible = true
      this.stuInfo = ''
      this.batch = ''
      this.stuInfo = stuInfo
      this.batch = batch
      const params = {
        'stu_id': stuInfo.id,
        'batch': batch
      }
      // 通过 studentid 查找  所有的 常规批方案 的 出分方案
      Api.STUDENT.findRoutineCartByStuId(params).then(s => {
        this.form = s.data
      })
    },
    closeWin () {
      this.$message({
        message: '正在生成图片并关闭页面，请稍等..........',
        type: 'success'
      })
      this.clickGeneratePicture(this.stuInfo.id, this.batch)
    },
    clickGeneratePicture (id, batch) {
      let ref = this.$refs.imageDom1 // 截图区域
      html2canvas(ref, {
      }).then(canvas => {
        let dataURL = canvas.toDataURL('image/png')
        // 将 id 和 图片地址 传入后台
        const params = {
          'id': id,
          'batch': batch,
          'imgInfo': dataURL
        }
        Api.STUDENT.saveImgCart(params).then(s => {
          this.$message({
            message: '报告图片生成成功！',
            type: 'success'
          })
        }).then(this.visible = false)
      })
        .catch(err => {
          this.$message({
            message: '图片生成失败',
            type: 'error'
          })
        }).then(this.visible = false)
    }
  }
}
</script>
<style scoped>
  .rm_table1 {
    width: 100%;
    border-left: 1px solid #dcdfe6;
    border-top: 1px solid #dcdfe6;
    background: #fff;
  }

  .inputDeep >>> .el-input__inner {
    border: 0;
  }

  .rm_table1 td {
    height: 38px;
    border-right: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    color: #333;
    font-size: 13px;
  }

  .rm_table1 td .el-form-item__content {
    line-height: 38px;
  }

  /*.tdBg {*/
  /*  background-color;*/
  /*}*/

  .rm_table1 td.table1_w1 {
    width: 146px;
  }

  .rm_table1 td.table1_w2 {
    width: 234px;
  }

  .rm_table1 td.table1_w5 {
    width: 425px;
  }

  .rm_table1 td.table1_w3 {
    width: 146px;
    height: 163px;
    overflow: hidden;
    position: relative;
  }

  .rm_table1 td.table1_w3 .avatar-uploader .avatar {
    width: 146px;
    height: 163px;
  }

  .rm_table1 td.table1_w3 .avatar-uploader {
    width: 146px;
    height: 163px;
    position: absolute;
    right: 0;
    top: 0;
    /*  opacity: 0;
      z-index: 10;
      filter: alpha(opacity=0);*/
  }

  .rm_table1 td.table1_w3 .avatar-uploader i {
    width: 146px;
    height: 163px;
  }

  .rm_table1 td.table1_w6 {
    width: 90px;
  }

  .rm_table1 td.height35 {
    height: 35px;
  }

  .borderNone >>> .el-input__inner {
    border: 1px solid #fff;
  }

  .borderNone >>> .el-textarea__inner {
    border: 1px solid #fff;
  }

  .borderNone >>> .el-dialog__body .el-input__inner {
    border: 1px solid #DCDFE6;
  }

  .form1Resume >>> .el-textarea__inner {
    height: 285px;
    border: 1px solid #fff;
  }

  .form2Resume >>> .el-textarea__inner {
    height: 120px;
    border: 1px solid #fff;
  }

  .rm_table1 td.table1_w3 img {
    width: 100%;
    position: absolute;
    top: 1px;
    left: 0;
    z-index: 1;
  }

  .rm_table1 td.textAlign {
    text-align: center;
  }

  .rm_table1 td .table1_font {
    color: #ff4444;
  }

  .rm_table1 td.lh18 {
    line-height: 16px;
  }

  .dl {
    width: 800px
  }

  .rm_table1 td.jianli_td {
    position: relative;
  }

  .rm_table1 td.jianli_td .a1 {
    font-size: 22px;
    position: absolute;
    top: 10px;
    left: 26px;
  }

  .rm_table1 td.jianli_td .a2 {
    font-size: 22px;
    position: absolute;
    top: 185px;
    left: 16px;
    padding: 5px 3px;
  }

  .rm_table1 tr.height140 {
    height: 140px;
  }

  .rm_table1 .el-form-item {
    margin-bottom: 0;
  }

  .rm_table1 .ql-toolbar {
    display: none;
  }

  .rm_table1 .quill-editor {
    height: 270px !important;
  }

  .rm_table1 .quill-editor p {
    text-indent: -8.5em !important;
    padding-left: 8.5em !important;
  }

  .rm_table1 .ql-container.ql-snow {
    border: none;
  }

  .rm_table1 .partydateinput1 .el-textarea__inner {
    padding: 5px 5px;
    text-align: center;
  }

  .rm_table1 .educationInput1 .el-textarea__inner {
    padding: 5px 5px;
    text-align: left;
  }

  .rm_table1 .el-input__inner {
    padding: 0px 10px;
  }

  .el-radio {
    margin: 0 5px 0 2px;
  }

</style>