<p align="center">
	<img alt="logo" src="https://oscimg.oschina.net/oscnet/up-d3d0a9303e11d522a06cd263f3079027715.png">
</p>
<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">RuoYi v3.8.4</h1>
<h4 align="center">基于SpringBoot+Vue前后端分离的Java快速开发框架</h4>
<p align="center">
	<a href="https://gitee.com/y_project/RuoYi-Vue/stargazers"><img src="https://gitee.com/y_project/RuoYi-Vue/badge/star.svg?theme=dark"></a>
	<a href="https://gitee.com/y_project/RuoYi-Vue"><img src="https://img.shields.io/badge/RuoYi-v3.8.4-brightgreen.svg"></a>
	<a href="https://gitee.com/y_project/RuoYi-Vue/blob/master/LICENSE"><img src="https://img.shields.io/github/license/mashape/apistatus.svg"></a>
</p>

## 平台简介

一七生活是一套全部开源的快速开发平台，毫无保留给个人及企业免费使用。

0 去除laber标签
1. 修改page  selectionChange 多选时候要加

<Page uri="/mapi/core/clothItem/list" :request-params="queryParams" ref="pagination">
<Page uri="/mapi/core/clothItem/list" :request-params="queryParams" ref="pagination" :selectionChange="handleSelectionChange">
2. 去除分页查询相关字段 pageNum

3. 修改查询
      this.$nextTick(() => {
        this.$refs.pagination.handleSearch(true)
      })


单选多选设置

<template>
  <div>
    <!-- 显示已选中的数据 -->
    <div v-if="selectedFactory" class="selected-item">
      已选择: {{ selectedFactory.name }}
      <el-button type="text" icon="el-icon-close" @click="clearSelected"></el-button>
    </div>
    
    <!-- 多选模式下显示已选中的数据列表 -->
    <div v-if="selectedFactories.length" class="selected-list">
      <el-tag 
        v-for="item in selectedFactories" 
        :key="item.id" 
        closable 
        @close="removeFactory(item)"
      >
        {{ item.name }}
      </el-tag>
    </div>

    <el-button @click="openSelector">选择工厂</el-button>
    
    <!-- 单选模式 -->
    <data-selector
      ref="singleSelector"
      title="选择工厂"
      :multiple="false"
      :selected="selectedFactory"
      :data-columns="dataColumns"
      :fetch-data="fetchFactoryData"
      @confirm="handleSingleSelect"
    />
    
    <!-- 多选模式 -->
    <data-selector
      ref="multiSelector"
      title="选择工厂"
      :multiple="true"
      :selected="selectedFactories"
      :data-columns="dataColumns"
      :fetch-data="fetchFactoryData"
      @confirm="handleMultiSelect"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 单选数据
      selectedFactory: null,
      // 多选数据
      selectedFactories: [],
      dataColumns: [
        { field: 'name', label: '工厂名称' },
        { field: 'address', label: '地址' },
        { field: 'contact', label: '联系人' }
      ]
    }
  },
  methods: {
    // 打开选择器
    openSelector(type = 'single') {
      if (type === 'single') {
        this.$refs.singleSelector.show()
      } else {
        this.$refs.multiSelector.show()
      }
    },
    // 处理单选
    handleSingleSelect(data) {
      this.selectedFactory = data
    },
    // 处理多选
    handleMultiSelect(data) {
      this.selectedFactories = data
    },
    // 清除选择
    clearSelected() {
      this.selectedFactory = null
    },
    // 移除某个选中项
    removeFactory(item) {
      this.selectedFactories = this.selectedFactories.filter(f => f.id !== item.id)
    }
  }
}
</script>

<style lang="scss" scoped>
.selected-item {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected-list {
  margin-bottom: 10px;
  .el-tag {
    margin-right: 8px;
    margin-bottom: 8px;
  }
}
</style>