element ui表格

一、如何实现点击行能展开当前行

1.需要给el-table绑定ref属性

<el-table
	:data="tableData"
	ref="multipleTable"
>
 .......
</el-table>

2.需要绑定row-click事件

<el-table
		:data="tableData"
		@row-click="rowclick"
		ref="multipleTable"    
>
 .......
</el-table>

3.在methods中实现row-click事件

/**rowclick事件默认包含row,column,event参数**/
rowclick(row,column,event){
	this.$refs.multipleTable.toggleRowExpansion(row)
}

二、每次只展开一行，其余行折叠

1.给row-key和expand-row-keys绑定值

<el-table
	:data="tableData"
	:row-key="getRowKeys"
	:expand-row-keys="expands"
>
 .......
</el-table>

2.绑定expand-change事件

<el-table
	:data="tableData"
	:row-key="getRowKeys"
	:expand-row-keys="expands"
	@expand-change="expand"
>
 .......
</el-table>

data(){
	return{
			tableData:[],
			expands: [],
	}
}

3.对应函数

getRowKeys(row){
	return row.id
},
expand(row,expandedRows){
	if(expandedRows.length){
		this.expands = []
		if(row){
			/**与row-key的值对应**/
			this.expands.push(row.id)
		}
	}else{
		this.expands = []
	}
}

这样就能实现点击行也能展开列表了

三、搜索和分页

element ui自带搜索和分页组件，关键在于怎么把他们组合在一起

该例的tableData与上面的不一样

1.准备工作

/**html部分**/
<el-table :data="lsitData"
>
...
	/**搜索框**/
	<el-table-column>
		<template slot="header" slot-scope="props">
			<el-input
				prefix-icon="el-icon-search"
				v-model="search"
				placeholder="搜索"
				@keyup.native="searchPage()"
			/>
		</template>
	</el-table-column>
...
	/**完整功能**/
	<el-pagination
		:current-page="curPage"
		:page-sizes="[5, 10, 50, 100]"
		:page-size="pageSize"
		layout="total, sizes, prev, pager, next, jumper"
		:total="totalNum"
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
>
	</el-pagination>
</el-table>
/**html部分**/


/**vue部分**/
data(){
	return{
			search: '',
			listData: [],
			tableData: [],
			totalNum: '',
			pageSize: '',
			curPage: '',
			timeclear: '',
	}
}
/**vue部分**/

2.将后端返回的数据用一个数组存起来

timer(){
	let This= this
	$.ajax({
	type:"类型",
	url:"...",
	sccept:"application/json",
	/**成功的回调函数**/
	success(data){
		let json = data
		/**如果data是数组，直接存进去
			This.tableData = json
			This.tableData = json.length
		**/
		
		/**如果是json对象
			This.tableData = json.data
			This.totalNum = json.data.length
		**/
		This.pageTimer()
	},
	/**失败的回调函数**/
	error(){
		alert('数据接收失败')
	}
})
}

3.分页显示

核心思想是将数组根据当前页和页数进行切分，用到了slice方法

	/**分页函数**/
	pageTimer(){
		const tempData = this.tableData
		if(tempData.length){
			if(this.search == ''){
				/**listData为展示的数据**/
				this.listData = tempData.slice(
					this.pageSize*(this.curPage-1),
					this.pageSize*this.curPage
				)
 			}else{
				......
			}
		}	
	}

4.搜索显示

主要用到filter函数 arr.filter(
data=>
data.name.toLowerCase().includes(search.toLowerCase())
)

	/**分页函数**/
	pageTimer(){
		const tempData = this.tableData
		if(tempData.length){
			if(this.search == ''){
				/**listData为展示的数据**/
				this.listData = tempData.slice(
					this.pageSize*(this.curPage-1),
					this.pageSize*this.curPage
				)
 			}else{
				/**搜索符合要求的总页数**/
				/**这个例子是搜索名字的**/
				this.totalNum = tempData.filter(
					(data) =>	
						data.name
					toLowerCase().
					includes(this.search.toLowerCase()) 
				).length
				this.listData = tempData.filter(
					(data) =>	
						data.name
					toLowerCase().
					includes(this.search.toLowerCase()) 
				)
				/**分页**/
				this.listData = this.listData.slice(
					this.pageSize*(this.curPage-1),
					this.pageSize*this.curPage
				)
			}
		}	
	}

5.搜索和切换页数时调用该函数

	searchPage(){
		let This = this
		/**计时器，500ms内没有输入数据执行该函数**/
		/**避免数据为输入完成就执行该函数**/
		clearTimeout(this.timeclear)
		this.timeclear = setTimeout(
			function(){
				This.pageTimer()
			},500
		)
	}
	handleSizeChange(val){
		this.pageSize = val
		this.pageTimer()
	}
	handleCurrentChange(val){
		this.curPage = val
		this.pageTimer()
	}