字典增加选中高亮

src/components/form/FormComp.vue

@@ -56,6 +56,21 @@ const handleUploadSuccess: UploadProps['onSuccess'] = response => {
     <img v-if="modelValue" :src="modelValue" class="avatar" />
     <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
   </el-upload>
+  <el-select
+    v-else-if="item.type === 'select'"
+    v-model="modelValue"
+    v-bind="item.props"
+    :placeholder="item.placeholder || placeholder(item)"
+    v-on="item.events || {}"
+  >
+    <el-option
+      v-for="(option, index) in item.options"
+      :label="option.label"
+      :value="option.value"
+      :key="index"
+      v-bind="option.props"
+    ></el-option>
+  </el-select>
   <component
     v-else
     :is="'el-' + item.type"
@@ -74,15 +89,6 @@ const handleUploadSuccess: UploadProps['onSuccess'] = response => {
         {{ option.value }}
       </el-checkbox>
     </template>
-    <template v-else-if="item.type === 'select'">
-      <el-option
-        v-for="(option, index) in item.options"
-        :label="option.label"
-        :value="option.value"
-        :key="index"
-        v-bind="option.props"
-      ></el-option>
-    </template>
   </component>
 </template>
 

src/views/system/Dict.vue

@@ -75,6 +75,12 @@ const curRow = ref<any>(null)
 const handleRowClick = (row: any) => {
   curRow.value = row
 }
+const rowClassName = ({ row }: { row: any }) => {
+  if (row.id === curRow.value.id) {
+    return 'active'
+  }
+}
+
 const itemTableRef = ref<any>(null)
 watch(curRow, () => {
   itemTableRef.value?.refresh()
@@ -114,7 +120,7 @@ const dictItemFormConfig = reactive<BasicForm>({
 <template>
   <el-row :gutter="16">
     <el-col :span="12">
-      <pro-table :crud="CRUD" :formConfig="dictFormConfig" @row-click="handleRowClick">
+      <pro-table :crud="CRUD" :formConfig="dictFormConfig" :row-class-name="rowClassName" @row-click="handleRowClick">
         <el-table-column prop="description" label="字典名称"></el-table-column>
         <el-table-column prop="type" label="字典值"></el-table-column>
       </pro-table>
@@ -132,4 +138,11 @@ const dictItemFormConfig = reactive<BasicForm>({
   </el-row>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+:deep(.active) {
+  background-color: #f5f7fa !important;
+  .el-table-fixed-column--right {
+    background-color: #f5f7fa !important;
+  }
+}
+</style>