vue 弹窗 多选表格组件封装 以及 回调绑定

组件

<template>
	<!-- 角色table多选回显组件-强制单选 -->
	<div>
		<el-row>
			<el-form :inline="true" :model="ruleForm" class="demo-form-inline">
				<el-form-item label="角色名称:">
					<el-input
						size="small"
						v-model="ruleForm.name"
						placeholder="请输入角色名称"
						clearable
					></el-input>
				</el-form-item>

				<el-form-item>
					<el-button round size="small" @click="search" type="danger">查询</el-button>
				</el-form-item>
			</el-form>
		</el-row>

		<!-- table数据 -->
		<div class="result-list linheight">
			<el-table size="small"
				ref="multipleTable"
				:data="list"
				border
				style="width: 100%"
				align="center"
				@selection-change="handleSelectionChange"
				@select="select"
				@select-all="selectAll"
				:row-key="
					(row) => {
   
						return row.id
					}
				"
			>
				<el-table-column
					type="selection"
					width="55"
					align="center"
					show-overflow-tooltip
					:reserve-selection="true"
				>
				</el-table-column>
				<el-table-column
					type="index"
					:index="handleIndex"
					label="序号"
					width="55"
				></el-table-column>

				<el-table-column prop="userTypeName" label="用户类型" align="center"> </el-table-column>

				<el-table-column prop="name" label="角色名称" align="center"> </el-table-column>
			</el-table>
		</div