elementUI 表格用法

CSS

表格表头样式

html

// 设置表格第一行的颜色
      getRowClass ({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background:#2A3253'
        } else {
          return ''
        }
      },

https://blog.csdn.net/Feast_aw/article/details/80777577

表格默认hover背景颜色

.el-table__body tr:hover>td {
background: #1b223e !important;
}

https://segmentfault.com/q/1010000012532291?sort=created
https://blog.csdn.net/qq_39313596/article/details/83015358

表格设置头部第一行的背景颜色

https://blog.csdn.net/Feast_aw/article/details/80777577

表格点击一行，背景色变化

https://blog.csdn.net/zhongmei121/article/details/81560134

表格高度自适应

https://segmentfault.com/q/1010000013671400

表格宽度自适应

百分比显示列

表格行高（row-style)


data () {
  return {
      rowStyle: {maxHeight: 57 + 'px', height: 57 + 'px'},
  }
}

注意：不能直接写 row-style="height: 100px;"，
会报错 Invalid prop: type check failed for prop "rowStyle". Expected Object, Function, got String。

解释：该变量需要一个对象或者方法，而你给他的是一个string。
解决方法：应该在前面加上: 代表变量，在下面定义一个对象将对象填入 :row_style="yourObject"

https://blog.csdn.net/qq_39313596/article/details/81477735

表格滚动条样式修改

https://segmentfault.com/q/1010000016366942?utm_source=tag-newest

JS

表格路由跳转

https://www.jianshu.com/p/fe96cd805f3d

表格手风琴，且动态获取表格展开的数据

data () {
   return {
        // 获取row的key值
        getRowKeys(row) {
          return row.id;
        },
        // 要展开的行，数值的元素是row的key值
        expands: []
   }
}

expandChange (row) {
        if (this.expands.indexOf(row.id) >= 0) {
          this.expands.shift()  // 收起当前行
          return
        }
        this.expands = []
        this.expands.push(row.id) // 只展开当前行
        this.tableData.forEach((item, index) => {
          if (item.id == row.id) {
            // 直接为动态展开的数据，赋值
            this.$set(this.tableData[index], 'childData', this.childData) 
            // this.$set(要赋值的对象，属性名，数据) // 如果赋值后数据没有刷新，就需要提前清空数据
          }
        }, this)
      },

https://segmentfault.com/q/1010000008981772

表格嵌套并且在子表格没有数据的时候隐藏展开按钮

https://blog.csdn.net/Null_Bugs/article/details/81146044

表格提交时获取所有选中的checkbox的数据

https://blog.csdn.net/rickiyeat/article/details/76595308

表格复选框配合分页，数据如何回显（reserve-selection与row-key结合）

html

data () {
  return {
     // 获取row的key值
     getRowKeys (row) {
          return row.id
     },
    tableTrue: true
  }
}

https://segmentfault.com/q/1010000009772656

表格滚动条回到顶部

el-table 中设置 ref="mytable"

this.$refs.mytable.bodyWrapper.scrollTop =0;

https://www.jianshu.com/p/8d7f28d7bd87

表格复选框，清空选中的值

 

// 加到点击事件或其他事件中
this.$refs.multipleTable.clearSelection();

table列超出部分省略加悬浮提示（2.8.2新加功能）

https://blog.csdn.net/xdhc304/article/details/80611227

表格固定表头和某一列

固定表头：（给表格设置高）

 // 可以是数字，也可以自定义数值

固定某一列：（给列设置 fixed）

获取表格每一行的下标（用作表格序号）

https://blog.csdn.net/y1s2y3/article/details/82733179

获取每行的索引值

methods: {
  tableRowClassName ({row, rowIndex}) {
      //把每一行的索引放进row
      row.index = rowIndex;
  },
  onRowClick (row, event, column) {
      //行点击消除new标记
      var index = row.index;
      var deleteIndex = Array.indexOf(this.showIndexArr, index);
      if (deleteIndex != -1) {
         this.showIndexArr.splice(deleteIndex,1);  
      }
  }
}

https://www.cnblogs.com/yangyi9343/p/9295293.html

表格点击展开：

隐藏展开符号：

.el-table__expand-column .cell {
  display: none;
}

将点击事件赋值到其他地方：

handleCheck(row) {
        const $table = this.$refs.table
        $table.toggleRowExpansion(row)
        $table.toggleRowSelection(row)
}

https://www.cnblogs.com/daipianpian/articles/9516088.html

单击某一行数据时选中对应的复选框

clickRow(row){
     this.$refs.moviesTable.toggleRowSelection(row)
}

https://blog.csdn.net/gongyi199393/article/details/80902845

element-ui的table列超出部分省略加悬浮提示

https://blog.csdn.net/xdhc304/article/details/80611227

Element UI的表格双击之后可编辑（没试过）

https://segmentfault.com/q/1010000014417142/a-1020000014418134

elementUi table根据不同状态变成不同颜色的背景色


tableColor({row, rowIndex}) {
      if(rowIndex == rowIndex){
            if(row.status == 1){
                  return 'tableColor-blue'
            }else if(row.status == 2){
                  return 'tableColor-yellow'
            }else if(row.status == 3){
                  return 'tableColor-violet'
            }else if(row.status == 4){
                  return 'tableColor-green'
            }
      }
}

http://www.czl.mobi/a/qianduankuangjia/Vue/112.html

表格展开行报错

报错： [Vue warn]: Error in callback for watcher "data": "Error: if there's nested data, rowKey is required."

表面的意思是如果有嵌套的数据，需要在el-table标签中新增row-key字段

　　当tableData数据格式为以下形式会出现上面的报错：　
　　　　tableData: [{
　　　　　　name: '好滋好味鸡蛋仔',
　　　　　　category: '江浙小吃、小吃零食',
　　　　　　desc: '荷兰优质淡奶，奶香浓而不腻',
　　　　　　children:[{
　　　　　　　　name:'土鸡蛋',
　　　　　　　　desc:'美味...'
　　　　　　}]
　　　　}]
　　问题就出现在key为children名字上，如果换成其他命名不会报错。。。。　
　　如下可使用array.map函数处理下数据就可以解决问题了。。。
　　　　let handleData = tableData.map(item => {
　　　　　　return {
　　　　　　　　name: item.name,
　　　　　　　　category: item.category,
　　　　　　　　desc: item.desc,
　　　　　　　　childrens: item.children
　　　　　　};
　　　　});

https://www.cnblogs.com/changxue/p/10719454.html

表格中禁用部分复选框

methods: {
  selectable(row, index) {
    if (row.status == 1) {
      return true
    } else {
      return false
    }
  }
}

https://www.jb51.net/article/170515.htm

编辑，新增，删除一行

tableData中push一条新数据（新增）

tableData.push({ fildna: '',fildtp:'',remark:''})

https://blog.csdn.net/alokka/article/details/73719371

表格数据为空时自定义显示内容

https://blog.csdn.net/m0_46627730/article/details/106034638

自定义表头内容

https://www.cnblogs.com/wenxinsj/p/10613764.html

删除一行

handleDelete(index){ //删除行数
    this.tableData.splice(index, 1)
}

https://www.jb51.net/article/191078.htm