el-table表格

阅读数:102 评论数:0

分类

html/css/js

正文

一、去掉或修改横线颜色

.twj-table td,
.twj-table ::v-deep th.is-leaf {
  border-bottom: 1px solid #cadcff;
}

二、修改表头样式

方式1、使用header-cell-class-name

（1）添加header-cell-class-name属性

（2）添加table_header样式

方式2、使用header-row-class-name

三、树型数据只第一级设置索引

1、实现效果

2、实现思路

默认情况下，el-table是所有行都会设置序号
而需求是子数据不设置序号，只有第一级的节点才设置序号，如最上方图片显示的那样
所以上方代码中序号绑定了一个自定义方法indexMethod，返回自定义的index
思路是，后端传的是树结构数据，进行扁平化，只有第一级设置index属性，从而indexMethod返回相应index。

  /** 获取树表格数据 */
    async treeData() {
      // 调用后端接口
      const { data: res } = await http.post(`message/treeData`)
      if (res.code === 0) {
        // 只有第一级才设置index，用于indexMethod方法中自定义表格索引
        res.data.forEach((item, index) => {
          item.index = index + 1
        })
        // 树数组转扁平数组，用于indexMethod方法中判断表格索引
        function treeToArray(data) {
          const arr = []
          function recursiveFunction(data) {
            for (let i = 0; i < data.length; i++) {
              arr.push(data[i])
              if (data[i].children && data[i].children.length) {
                recursiveFunction(data[i].children)
              }
            }
          }
          recursiveFunction(data)
          return arr
        }
        this.treeArr = treeToArray(res.data)
        this.tree = res.data
      }
    },
    /** 自定义表格index */
    indexMethod(index) {
      return this.treeArr[index].index ? this.treeArr[index].index : ""
    },

四、Expected Boolean,got String with value "true"

属性值期望得到布尔值，实际是字符串。

解决方法：属性前加冒号：

表示这个属性的值是data里面的一个属性变量或者是true或false。

五、添加行或单元格样式

1、row-style/cell-style

（1）使用Object

<template>
 <div>
   <el-table :data="tableData" :row-style="{'background-color':'pink','color':'white'}">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>

<template>
 <div>
   <el-table :data="tableData" :cell-style="{'background-color':'blue','color':'red'}">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>

（2）使用Function

<template>
 <div>
   <el-table :data="tableData" :row-style="rowStyle">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>
<script>
export default {
	methods:{
   		rowStyle({row,rowIndex}){
     		if(row.name=="王小狼"){
       			return {
         			"background":"skyblue",
         			"color":"green"
       			}
     		}
   		}
	}
}
</script>

<template>
 <div>
   <el-table :data="tableData" :cell-style="cellStyle">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>

 methods:{
   cellStyle({row,column,rowIndex,columnIndex}){
     if(row.name=="王小狼" && column.property=="name"){
       return {
         "background":"gray",
         "color":"purple"
       }
     }
   }
}

2、row-class-name/cell-class-name

（1）使用String

<template>
 <div>
   <el-table :data="tableData" row-class-name="rowName">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>
<style>
.rowName{
 background:pink!important;
 color:deeppink
}
</style>

<template>
 <div>
   <el-table :data="tableData" cell-class-name="cellName">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
</div>
</template>
<style>
.cellName{
 background:brown!important;
 color:chartreuse
}
</style>

（2）使用Function

<template>
 <div>
   <el-table :data="tableData" :row-class-name="rowClassName">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>
<script>
export default = {
 methods:{
   rowClassName({row,columnIndex}){
     if(row.date=="2022-05-01"){
       return "rowName"
     }
   }
 }
} 
</script>
<style>
.rowName{
 background:deeppink!important;
 color:whitesmoke
}
</style>

<template>
 <div>
   <el-table :data="tableData" :cell-class-name="cellClassName">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="date" label="日期"></el-table-column>
     <el-table-column prop="address" label="地址" width="800"></el-table-column>
   </el-table>
 </div>
</template>

 methods:{
   cellClassName({row,column,rowIndex,columnIndex}){
     if(row.date!="2022-05-01" && column.label=="日期"){
       return "cellName"
     }
   }
 }

<style>
.cellName{
 background:blueviolet!important;
 color:aqua
}
</style>