diff --git a/packages/editor/src/fields/UISelect.vue b/packages/editor/src/fields/UISelect.vue
index 6e9ab841..641583c1 100644
--- a/packages/editor/src/fields/UISelect.vue
+++ b/packages/editor/src/fields/UISelect.vue
@@ -1,16 +1,20 @@
 <template>
   <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
-    <i class="el-icon-delete" style="color: rgb(221, 75, 57)">取消</i>
+    <el-button type="danger" :icon="Delete" text style="padding: 0">取消</el-button>
   </div>
-  <div class="m-fields-ui-select" v-else @click="startSelect">
-    <i class="el-icon-thumb"></i>
-    <span>{{ val ? toName + '_' + val : '点击此处选择' }}</span>
-    <i class="el-icon-delete" @click.stop="deleteHandler" v-if="val"></i>
+  <div class="m-fields-ui-select" v-else @click="startSelect" style="display: flex">
+    <el-tooltip content="清除">
+      <el-button v-if="val" style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></el-button>
+    </el-tooltip>
+    <el-tooltip :content="val ? toName + '_' + val : '点击此处选择'">
+      <el-button text style="padding: 0; margin: 0">{{ val ? toName + '_' + val : '点击此处选择' }}</el-button>
+    </el-tooltip>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, ref } from 'vue';
+import { computed, defineComponent, inject, markRaw, ref } from 'vue';
+import { Close, Delete, Pointer } from '@element-plus/icons';
 
 import { FormState } from '@tmagic/form';
 
@@ -60,6 +64,10 @@ export default defineComponent({
     };
 
     return {
+      Delete: markRaw(Delete),
+      Pointer: markRaw(Pointer),
+      Close: markRaw(Close),
+
       val,
       uiSelectMode,
       toName: computed(() => {