elementui中的el-table展开行中的表格如何控制勾选?

使用模板列替代el-table的"selection"列。
示范:

<template>
	<el-table :data="tabledata">
		<el-table-column type="expand">
			<template slot-scope="{row}">
				
				<el-table :data="row.rows">
					<el-table-column>
						<template slot="header">
							<el-checkbox v-model="row.selectAll" @change="subtableSelectionChange(row,true)"/>
						template>
						<template slot-scope="scope">
							<el-checkbox v-model="scope.row.selected" @change="subtableSelectionChange(row)"/>
						template>
					el-table-column>
				el-table>
			template>
		el-table-column>
	el-table>
template>
<script>
export default {
	data(){
		return {
			tabledata:[
				{rows:[{selected:false}],selectAll:false}
			]
		}
	},
	methods:{
		//嵌套表的复选框事件
		subtableSelectionChange(row,isall){
			//控制全选
			if(isall){
				row.rows.forEach(d=>{
					d.selected=row.selectAll;
				});
			}else{
				row.selectAll=row.rows.every(d=>d.selected);
			}
		}
	}
}
script>

你可能感兴趣的:(经验分享,web前端,vue,javascript)