表格中插入tooltip-带分页

表格中插入tooltip-带分页

图例

格式

  
评价列表
    

      
        
          
        

        
        
        
      
      

        
        
      

数据

 data() {
    return {
      // 表格
      tableData: [
        {
          date: "基础一部",
          name: "一、合程性指标-1",
          fraction: "1",
          address: "基础一部",
        },
        {
          date: "移动互联部",
          name: "一、合性指标-2",
          fraction: "2",
          address: "科技部",
        },
        {
          date: "财务部",
          name: "一、合性指标-3",
          fraction: "3",
          address: "财务部",
        },
        {
          date: "总裁办",
          name: "一、合性指标-5",
          fraction: "4",
          address: "总裁办",
        },
        {
          date: "移动部",
          name: "一、合性指标-6",
          fraction: "5",
          address: "移动部",
        },
        {
          date: "2016-05-04",
          name: "已提交",
          fraction: "6",
          address: "科技部",
        },
      ],
      // 分页
      pagesize: 5,
      currentPage: 1,
    };
  },

  methods: {
    // 分页,点击切换
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },

样式

.a {
  width: 96px;
  height: 24px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  line-height: 24px;
  margin-top: 12px;
  margin-bottom: 24px;
  font-weight: 700;
}
//表头换背景颜色
/deep/.el-table th,
.el-table tr {
  background: rgba(244, 245, 247, 1);
}
.pag {
  margin-top: 24px;
}
//分页靠右
.el-pagination {
  float: right;
}
//表格铺满
/deep/.el-table__header {
  width: 100% !important;
  table-layout: fixed;
}

/deep/.el-table__body {
  width: 100% !important;
}