feat: 添加xselect组件并注册到全局

src/components/ehsSelect/xselect.vue

@@ -0,0 +1,105 @@
+<template>
+	<div>
+		<el-input
+			ref="inputRef0"
+			:value-on-clear="null"
+			style="display: none"
+			v-model="inputValue"
+		>
+		</el-input>
+		<el-input
+			:value-on-clear="null"
+			:readonly="true"
+			ref="inputRef"
+			suffix-icon="el-icon-search"
+			v-model="inputLabel"
+		>
+		</el-input>
+		<div v-if="edit">
+			<el-popover
+				v-model:visible="showPopover"
+				trigger="click"
+				virtual-triggering
+				:virtual-ref="inputRef"
+				:width="tableWidth"
+			>
+				<el-input
+					v-model="keyword"
+					placeholder="关键词查找"
+					@keyup.enter="handleQuery"
+				></el-input>
+				<div style="height: 2px"></div>
+				<scTable
+					ref="table"
+					:apiObj="apiObj"
+					:params="params"
+					:query="query"
+					:height="tableHeight"
+					row-key="id"
+					stripe
+					@row-click="rowClick"
+					:hidePagination="hidePagination"
+					paginationLayout="prev, pager, next"
+					hideDo
+				>
+					<slot></slot>
+				</scTable>
+			</el-popover>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, computed } from "vue";
+
+const props = defineProps({
+	edit: { type: Boolean, default: true },
+	hidePagination: { type: Boolean, default: false },
+	tableWidth: { type: Number, default: 600 },
+	tableHeight: { type: Number, default: 400 },
+	apiObj: { type: Object, default: () => {}, required: true },
+	params: { type: Object, default: () => {} },
+	label: { type: String, default: "" },
+	modelValue: { type: String, default: null },
+	labelField: { type: String, default: "name" },
+	valueField: { type: String, default: "id" },
+});
+
+const emit = defineEmits(["update:modelValue", "update:label"]);
+
+// 控制 popover 显示与隐藏的状态
+const showPopover = ref(false);
+const inputRef = ref();
+const inputRef0 = ref();
+const table = ref();
+const inputLabel = computed({
+	get() {
+		return props.label;
+	},
+	set(val) {
+		emit("update:label", val);
+	},
+});
+const inputValue = computed({
+	get() {
+		return props.modelValue;
+	},
+	set(val) {
+		emit("update:modelValue", val);
+	},
+});
+
+const keyword = ref("");
+const query = ref({ search: "" });
+
+const handleQuery = () => {
+	query.value.search = keyword.value;
+	table.value.queryData(query.value);
+};
+
+const rowClick = (row) => {
+	inputLabel.value = row[props.labelField];
+	inputValue.value = row[props.valueField];
+	showPopover.value = false;
+};
+</script>

src/ehs.js

@@ -1,12 +1,12 @@
 import ehsUserSelect from './components/ehsSelect/userselect'
 import ehsEpSelect from './components/ehsSelect/epselect'
 import ehsSelect from './components/ehsSelect/select'
-import ehsTableSelect from './components/ehsSelect/tableSelect'
+import xSelect from './components/ehsSelect/xselect.vue'
 export default {
 	install(app) {
 		app.component('ehsUserSelect', ehsUserSelect);
 		app.component('ehsEpSelect', ehsEpSelect);
 		app.component('ehsSelect', ehsSelect);
-		app.component('ehsTableSelect', ehsTableSelect);
+		app.component('xSelect', xSelect);
 	}
 }

src/views/home/testx.vue

@@ -5,7 +5,7 @@
                 <el-menu-item index="1" @click="currentM='二维码'">二维码</el-menu-item>
                 <el-menu-item index="2" @click="currentM='带默认的选择'">带默认的选择</el-menu-item>
                 <el-menu-item index="3" @click="currentM='图标选择'">图标选择</el-menu-item>
-                <el-menu-item index="4" @click="currentM='表格选择'">表格选择</el-menu-item>
+                <el-menu-item index="4" @click="currentM='xselect'">xselect</el-menu-item>
                 <el-menu-item index="5" @click="currentM='vue-echarts'">vue-echarts</el-menu-item>
             </el-menu>
         </el-aside>
@@ -26,14 +26,12 @@
 			<div v-if="currentM=='图标选择'">
 				<scIconSelect></scIconSelect>
 			</div>
-			<div v-if="currentM=='表格选择'">
+			<div v-if="currentM=='xselect'">
-				<ehsTableSelect :apiObj="apiObj2" v-model="x2">
+				<xSelect :apiObj="apiObj" v-model="x2" v-model:label="x2_name" style="width: 200px">
-					<el-table-column label="姓名" prop="name"></el-table-column>
+                    <el-table-column label="id" prop="id"></el-table-column>
-					<el-table-column
+                    <el-table-column label="名称" prop="name"></el-table-column>
-						label="账号"
+                </xSelect>
-						prop="username"
+                <!-- <el-button @click="showx2"></el-button> -->
-					></el-table-column>
-				</ehsTableSelect>
 			</div>
             <div v-if="currentM=='vue-echarts'">
                 <v-chart :option="chartOption" autoresize  style="height: 400px; width: 400px"/>
@@ -53,7 +51,8 @@ export default {
 			x_name: "光芯科技",
 			// x:null,
 			apiObj2: this.$API.system.user.list,
-			x2: {},
+			x2: "3347207082608115712",
+            x2_name: "烧成车间",
             chartOption: {
               textStyle: {
                 fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
@@ -103,6 +102,10 @@ export default {
 		};
 	},
 	mounted() {},
-	methods: {},
+	methods: {
+        showx2(){
+            // console.log(this.x2)
+        }
+    },
 };
 </script>