本文共 2207 字，大约阅读时间需要 7 分钟。

多选表格

前言： 多选表格是比较常用的，尤其是选中某些行进行删除操作

图片：

• 点击删除按钮，打印输出选中项
  -点击删除按钮，置空所用选中项

表格代码

   
	
    
     删除
    	
    
     取消
    	
    	    
     		
     		
     		
     		
     	
    
   

实现

data:{   	//表格数据	studentData:[		{   id:'01',name:'秦一',sex:'男',age:18},		{   id:'02',name:'王小二',sex:'男',age:18},		{   id:'03',name:'唐三',sex:'男',age:18},		{   id:'04',name:'赵四',sex:'男',age:18},	],	//记录选中项	checkBox:[],},methods: {   	//多选框	handleSelectionChange(val) {   		this.checkBox = []		val.forEach((item, index) => {   			this.checkBox.push({   				id: item.id			})		})	},	//删除，这里应该是调用后端接口实现	del() {   		console.log(this.checkBox)	},	//取消	cancel() {   		this.$refs['multipleTable'].clearSelection()  //清空表格选项		this.checkBox = []	}}

table样式的修改

前言： table的样式比较单调，有时想要表头设置不一样的颜色，或者单元格的样式

表头样式的修改

• 对象用法，将表头文字设为蓝色

• 函数用法，奇数列背景颜色为灰色

   
    headerStyle({    row, column, rowIndex, columnIndex }){   	if(columnIndex%2==1){   		return 'background-color:gray'	}},
   

/*** * row为某一行的除操作外的全部数据 * column为某一列的属性 * rowIndex为某一行（从0开始数起） * columnIndex为某一列（从0开始数起） */

单元格样式的修改

   
    cellStyle({   row,column,rowIndex,columnIndex}) {   	//第2行背景颜色为粉色	if (rowIndex == 1) {   		return 'background-color:pink'	}	//姓名为唐三的单元格字体颜色为白色，背景为灰色	if (row.name == '唐三' && columnIndex == 2) {   		return 'color:white;background-color:gray'	}},
   

多级表头

最近在项目中要使用多级表头，之前没用过特地看了一下。

多级表头还是比较简单：只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。

实例

树形table

这个是最近工作中遇到的，当时还有点懵，后来特地去看了下

• row-key ，行唯一标识，确保每一行都是唯一的
• default-expand-all，全展开
• :tree-props="{children: ‘children’}" ，指定树形结构，children属性的值要与table表格的属性对应
• 因为是树形结构，所以每一个对象的结构必须一致

为表头添加星号

   
    starAdd(obj) {       if(obj.columnIndex === 1 || obj.columnIndex === 3 || obj.columnIndex === 2 || obj.columnIndex === 5) {           return 'star';    }}
   

表头错位问题

/deep/ .el-table th.gutter{       display: table-cell!important;}