多选表格

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

图片：

功能：

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

表格代码

<div id="app">
	<el-button type="primary" @click="del">删除</el-button>
	<el-button @click="cancel">取消</el-button>
	<el-table ref="multipleTable" :data="studentData" style="width: 100%" border
	    @selection-change="handleSelectionChange"
		:header-cell-style="headerStyle"
	    :cell-style="cellStyle">
	    <el-table-column type="selection" width="55" align="center"></el-table-column>
		<el-table-column prop="id" label="ID" width="180" align="center"></el-table-column>
		<el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
		<el-table-column prop="sex" label="性别" width="180" align="center"></el-table-column>
		<el-table-column prop="age" label="年龄" width="180" align="center"></el-table-column>
	</el-table>
</div>

实现
这里主要借助框架提供的selection-change 事件（当选择项发生变化时会触发该事件）

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的样式比较单调，有时想要表头设置不一样的颜色，或者单元格的样式

表头样式的修改
表头样式的修改主要借助header-row-style，有两种用法，一种是对象，另一种是函数

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

<el-table ref="multipleTable" :data="studentData" style="width: 100%" border 
:header-cell-style="{color:blue}" >

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

<el-table ref="multipleTable" :data="studentData" style="width: 100%" border 
:header-cell-style="headerStyle" >

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

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

单元格样式的修改
表头样式的修改主要借助cell-style，有两种用法，一种是对象，另一种是函数。这里主要以函数为例

<el-table ref="multipleTable" :data="studentData"
 style="width: 100%" border :cell-style="cellStyle">

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