scTableSelect 增加change事件

src/components/scTableSelect/index.vue

@@ -1,10 +1,10 @@
 <!--
  * @Descripttion: 表格选择器组件
- * @version: 1.1
+ * @version: 1.2
  * @Author: sakuya
  * @Date: 2021年6月10日10:04:07
  * @LastEditors: sakuya
- * @LastEditTime: 2021年11月4日16:09:05
+ * @LastEditTime: 2022年2月28日09:39:03
 -->
 
 <template>
@@ -154,6 +154,7 @@
 				}
 				this.autoCurrentLabel()
 				this.$emit('update:modelValue', this.defaultValue);
+				this.$emit('change', this.defaultValue);
 			},
 			//表格全选事件
 			selectAll(rows){
@@ -175,6 +176,7 @@
 				}
 				this.autoCurrentLabel()
 				this.$emit('update:modelValue', this.defaultValue);
+				this.$emit('change', this.defaultValue);
 			},
 			click(row){
 				if(this.multiple){
@@ -184,6 +186,7 @@
 					this.$refs.select.blur()
 					this.autoCurrentLabel()
 					this.$emit('update:modelValue', this.defaultValue);
+					this.$emit('change', this.defaultValue);
 				}
 			},
 			//tags删除后回调
@@ -216,7 +219,6 @@
 			focus(){
 				this.$refs.select.focus();
 			}
-
 		}
 	}
 </script>

src/views/vab/tableselect.vue

@@ -11,14 +11,14 @@
 	<el-main>
 		<el-alert title="select深度改造的表格选择器, 非常适用于大量数据选择的场景" type="success" style="margin-bottom:20px;"></el-alert>
 		<el-card shadow="never" header="单选">
-			<sc-table-select v-model="value2" :apiObj="apiObj" :params="params" :table-width="600" :props="props">
+			<sc-table-select v-model="value2" :apiObj="apiObj" :params="params" :table-width="600" :props="props" @change="change">
 				<el-table-column prop="id" label="ID" width="180"></el-table-column>
 				<el-table-column prop="user" label="姓名"></el-table-column>
 			</sc-table-select>
 		</el-card>
 		<div style="height:15px"></div>
 		<el-card shadow="never" header="多选">
-			<sc-table-select v-model="value" :apiObj="apiObj" :table-width="700" multiple :props="props">
+			<sc-table-select v-model="value" :apiObj="apiObj" :table-width="700" multiple :props="props" @change="change">
 				<template #header="{form, submit}">
 					<el-form :inline="true" :model="form">
 						<el-form-item>
@@ -82,7 +82,11 @@
 
 		},
 		methods: {
-
+			//值变化
+			change(val){
+				this.$message('change事件，返回详情查看控制台')
+				console.log(val)
+			}
 		}
 	}
 </script>