1.table操作

html

<el-table :data="tableData" height="250" stripe border style="width: 100%">
          <el-table-column prop="num" label="编号"></el-table-column>
          <el-table-column prop="userid" label="工号"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="class" label="部门"></el-table-column>
          <el-table-column prop="ApplyTime" label="申请时间"></el-table-column>
          <el-table-column prop="ApplyType" label="申请类型"></el-table-column>
          <el-table-column prop="ApplyStatus" label="审核状态"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="handleDetail(scope.$index, scope.row)"
              >详情</el-button>
            </template>
          </el-table-column>
        </el-table>

js

data () {
tableData: []
}

2.单机改变单元格颜色

http://www.luyixian.cn/news_show_364004.aspx

3.单元格class样式无效

https://blog.csdn.net/momDIY/article/details/84504571

<style scoped>
@import "../../assets/common.css";

// 其余作用域内样式代码
</style>

3.单元格样式class

columnIndex从0开始
html

<el-table :data="tableData" border style="width: 100%" :cell-class-name="changeCellStyle">
          <el-table-column type="index" label="编号" width="50"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="userid" label="工号"></el-table-column>
          <el-table-column prop="class" label="部门"></el-table-column>
          <el-table-column prop="ontime" label="上班"></el-table-column>
          <el-table-column prop="outtime" label="下班"></el-table-column>
        </el-table>

js

  changeCellStyle({ row, column, rowIndex, columnIndex }) {
      //第八列添加 red 类
      console.log(row, "sadas");
      if (columnIndex === 4) {
        return row.oncolor + "Style";
      }
      if (columnIndex === 5) {
        return row.outcolor + "Style";
      }
    },

4.单元格宽度、高度

https://blog.csdn.net/caijunfen/article/details/79668780?utm_source=blogxgwz3

<tableList
                    ref="tableList"
                    height="auto"

5.切换tab后 el_table 固定列下方多了一条线

https://blog.csdn.net/qq_37749055/article/details/106937880

运行结果

6.列加图标

// 建筑业
  buildingTable: {
    tableTitle: {
      text: [
        "建筑业总产值",
        "建筑业增长值",
        "签订合同额",
        "房屋施工面积",
        "新开工面积",
      ],
      width: 160,
    //   defalutKey: ['jzyzcz_ljzs', 'jzyzjz_ljzs', 'qdhte_ljzs', 'fwsgmj_ljzs', "xkgmj_ljzs", ],
      defalutKey: ['sd'],
    },
    // itemWidth: 150,
    // eslint-disable-next-line no-unused-vars
    renderIcon: (h, { column, $index }, item, eventIndex) => {
      //eventIndex   0：增加值  1：总产值
      let val;
      let mb;
      let zs;
      switch (eventIndex) {
        case 0:
          mb = item.jzyzcz_mb != "" ? item.jzyzcz_mb : 0; //目标
          zs = item.jzyzcz_ljzs != "" ? item.jzyzcz_ljzs : 0; //增长
          break;
        case 1:
          mb = item.jzyzjz_mb != "" ? item.jzyzjz_mb : 0; //目标
          zs = item.jzyzjz_ljzs != "" ? item.jzyzjz_ljzs : 0; //增长
          break;
        case 2:
          mb = item.qdhte_mb != "" ? item.qdhte_mb : 0; //目标
          zs = item.qdhte_ljzs != "" ? item.qdhte_ljzs : 0; //增长
          break;
        case 3:
          mb = item.fwsgmj_mb != "" ? item.fwsgmj_mb : 0; //目标
          zs = item.fwsgmj_ljzs != "" ? item.fwsgmj_ljzs : 0; //增长
          break;
        case 4:
          mb = item.xkgmj_mb != "" ? item.xkgmj_mb : 0; //目标
          zs = item.xkgmj_ljzs != "" ? item.xkgmj_ljzs : 0; //增长
          break;
      }
      val = zs - mb;
      return val < 0
      ? h("span", [
          h("span", { style: "color:#D53A35", class: "el-icon-warning" }),
          h("span", column.label),
        ])
      : column.label;
    },

item.showPoint = (item.jzyzcz_ljzs - item.jzyzcz_mb) >= 0?false:true

运行结果

7.文字过长省略号

https://blog.csdn.net/lannieZ/article/details/107485780
样式
https://blog.csdn.net/scy_fighting/article/details/87795216

8.换行

https://blog.csdn.net/weixin_38779534/article/details/103022901

9.去除横线

https://blog.csdn.net/weixin_44171757/article/details/91542152

10.列名过长

https://blog.csdn.net/qq_38110572/article/details/107683701
可复制
https://www.cnblogs.com/mzhen/p/13215721.html
超长才有
https://www.cnblogs.com/zhaotq/p/9786812.html

<template slot="header">
                  　　　　<el-tooltip class="item"
                              popper-class="orderTip"
                              effect="light"
                              content="按注册登记类型分类"
                              placement="top">
                    　　　　　　<span>按注册登记类型分类</span>
                    　　　　</el-tooltip>
                  　　</template>