element ui 表格修改表头和每行的样式去掉边框每行的触发事件文字过长改变弹框宽度

qq_45700938

已于 2022-06-23 09:47:42 修改

阅读量682

点赞数

文章标签： ui vue.js elementui

于 2022-06-23 09:46:20 首次发布

本文链接：https://blog.csdn.net/qq_45700938/article/details/125421195

版权

<template>
  <div class="my_table">
    <el-table
      v-if="list"
      :data="list"
      style="width: 100%"
      :cell-style="{color:'#464646',backgroundColor:'transparent',fontSize:'13px',}"
      :row-style="{color:'#464646',backgroundColor:'transparent',fontSize:'13px',}"
      :header-cell-style="{color:'#454545',fontSize:'12px',backgroundColor:'transparent'}"
      @row-click="handle"
    >
      <el-table-column prop="index" width="80" label="排名"></el-table-column>
      <el-table-column v-if="level=='1'" width="150" show-overflow-tooltip prop="name" label="地区"></el-table-column>
      <el-table-column v-if="level=='2'" show-overflow-tooltip prop="allName" width="150" label="地区"></el-table-column>
      <el-table-column v-if="level=='3'" show-overflow-tooltip prop="allName2" label="地区"></el-table-column>
      <el-table-column show-overflow-tooltip prop="projects" label="非遗项目"></el-table-column>
      <el-table-column width="100" label="活力值">
        <template slot-scope="scope">
          <div style="display:flex;align-items: center;padding: 0 10px;">
            <div style="flex-grow: 1;">{{scope.row.heat}}</div>
            <div style="width:15px;margin-left:3px">
              <div v-if="scope.row.chainComparison==0" style="width:10px;height:3px;background:#ababab"></div>
              <img style="width:15px" v-if="scope.row.chainComparison==1" src="../../assets/image/bybcSecond/sheng.png" alt />
              <img v-if="scope.row.chainComparison==-1" style="width:15px" src="../../assets/image/bybcSecond/jiang.png" alt />
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)
import 'element-ui/lib/theme-chalk/index.css'
export default {
  props: ['list', 'level'],
  data() {
    return {}
  },
  watch: {
    list(val, old) {
      // if(!this.level==1 ){
      val.forEach((element) => {
        element.allName = element.name + element.nameAs
        element.allName2 = element.name + element.nameAs + element.nameAs2
      })
      // }
    },
  },
  methods: {
    handle(row, event, column) {
      console.log(row, event, column)
      let url = this.$router.resolve({
        path: '/attendance/bybcsecond/detail',
        query: {
          id: row.rankingId,
          mom: row.mom,
          index: row.index,
          name: row.name,
          nameAs: row.nameAs,
          nameAs2: row.nameAs2,
          heat: row.heat,
          level: this.level,
        },
      })
      window.open(url.href, '_blank')
    },
  },
}
</script>
<style>
.el-tooltip__popper {
  max-width: 80%;
}
</style>
<style scoped>
.my_table >>> .el-table th.is-leaf,
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  /* 去除上边框 */
  border: none !important;
}
.my_table >>> .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none !important;
}
.my_table >>> .el-table,
.el-table__expanded-cell {
  /* background-color: transparent !important; */
  background: rgba(255, 255, 255, 0.89);
}
.my_table >>> .el-table::before {
  /* 去除下边框 */
  height: 0 !important;
}
.my_table >>> .el-table th.is-leaf {
  /* 去除上边框 */
  border: none !important;
}
.my_table >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
.my_table >>> .el-table tr {
  background-color: transparent !important;
}
.my_table >>> .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
.my_table >>> .el-table .el-table__cell {
  padding: 5px 0;
}
.el-tooltip__popper {
  max-width: 10px !important;
}
</style>