表单，categoryName换成自己后端的对应字段

<el-form-item label="所属分类" prop="categoryName">
          <el-input v-model="formData.categoryName" placeholder="所属分类" readonly>
            <template #append>
              <el-button @click="handleShowDeviceDialog">
                选择
              </el-button>
            </template>
          </el-input>
</el-form-item>

弹窗-这里做了单独的分页，因为表单外还有一个分页

   <!-- 设备选择对话框 -->
    <el-dialog v-model="deviceDialogVisible" title="选择关联设备" width="50%" style="max-height: 700px;height: 700px;">
      <div class="device-dialog-content">
        <!-- 搜索和重置区域 -->
        <div class="search-area">
          <el-input v-model="searchKeyword" placeholder="请输入分类名称" style="width: 300px;margin-right: 5px;" clearable />
          <el-button type="primary" @click="handleSearchAssociation">搜索</el-button>
          <el-button @click="handleResetAssociation">重置</el-button>
        </div>

        <!-- 表格区域 -->
        <el-table height="470" :data="associationTableData" @row-click="row => associationSelected = row"
          highlight-current-row>
          <el-table-column label="选择" width="150" align="center">
            <template #default="scope">
              <el-radio :model-value="associationSelected && associationSelected.id"
                @change="() => associationSelected = scope.row" :label="scope.row.id" class="hidden-label" />
            </template>
          </el-table-column>
          <el-table-column prop="categoryName" label="分类名称" />
          <!-- <el-table-column prop="productName" label="产品名称" /> -->
        </el-table>

        <!-- 分页区域 -->
        <el-pagination v-if="associationTotal > 0" :current-page="associationPage" :page-size="associationPageSize"
          :total="associationTotal" @current-change="(page) => { associationPage = page; loadAssociationTable(); }"
          @size-change="(size) => { associationPageSize = size; loadAssociationTable(); }"
          layout="total, prev, pager, next, sizes" style="float: right;margin-top: 20px;" />
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deviceDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirmSelectionAssociation">确定</el-button>
        </div>
      </template>
    </el-dialog>

 js

const formData = reactive<DeviceForm>({});
// 关联设备
const deviceDialogVisible = ref(false);
const searchKeyword = ref('');
const associationTableData = ref<any[]>([]);
const associationTotal = ref(0);
const associationPage = ref(1);
const associationPageSize = ref(10);
const associationSelected = ref<any>(null);

async function loadAssociationTable() {
  // 这里调用后端接口，传递 searchKeyword、associationPage、associationPageSize
  // 假设接口返回 { list: [], total: 100 }
  const res = await CategoryAPI.getPage({
    categoryName: searchKeyword.value,
    pageNum: associationPage.value,
    pageSize: associationPageSize.value,
  });
  associationTableData.value = res.list;
  associationTotal.value = res.total;
}
// 显示设备选择对话框
const handleShowDeviceDialog = () => {
  deviceDialogVisible.value = true;
  searchKeyword.value = '';
  associationPage.value = 1;
  loadAssociationTable();
}
// 选中的表格行
const selectedRow = ref<any>(null) // 改为单选，只存储一个选中项
function handleSearchAssociation() {
  associationPage.value = 1;
  loadAssociationTable();
}
function handleResetAssociation() {
  searchKeyword.value = '';
  associationPage.value = 1;
  loadAssociationTable();
}
function handleConfirmSelectionAssociation() {
  if (!associationSelected.value) {
    ElMessage.warning('请选择设备');
    return;
  }
  console.log("选择设备", associationSelected.value.id)
  formData.categoryId = Number(associationSelected.value.id);
  // formData.categoryName = associationSelected.value.categoryName + '-' + associationSelected.value.productName;
  formData.categoryName = associationSelected.value.categoryName;
  deviceDialogVisible.value = false;
}