@weier/w-select-more

• 列表单选/多选组件

// 安装
npm i @weier/w-select-more -S

// 代码引入
import wSelectMore from '@weier/w-select-more'

基础用法

这里例子的数据是随机获取的，为了验证多选/跨页多选/多选回显

:::demo

<template>
  <div class='w-select-more' >
    <el-radio-group v-model="radio" @change='radioChange'>
      <el-radio :label="0">单选</el-radio>
      <el-radio :label="1">多选</el-radio>
    </el-radio-group>
    <w-select-more
      title='选择组件' 
      :columns="myCloumns" 
      rowKey='id' 
      :multiple="multiple"
      :value="selectedResult" 
      :serve="runServer" 
      @change="submitCallback"
      :tableOptions="tableOptions()"
      :containerOptions="containerOptions()"
    >
    </w-select-more>
  </div>
</template>
<script>
export default {
  data: () => ({
    myCloumns:[      
        { type: 'index', width: '100px' },
        { label: '商品id', prop: 'id', sortable: true },
        {
          label: '商品标题',
          prop: 'name',
          align: 'left'
        },
        {
          label: '状态',
          prop: 'productStatusName'
        }
    ],
    productData: [
      {
        "id": 9760043,
        "name": "最鲜艳的红领巾",
        "productStatusName": "在售",
      },      
      {
        "id": 9760044,
        "name": "小黄帽",
        "productStatusName": "在售",
      },      
      {
        "id": 9760045,
        "name": "swag到爆的紫背心",
        "productStatusName": "在售",
      },      
      {
        "id": 9760046,
        "name": "潮流洞洞拖孩",
        "productStatusName": "在售",
      },      
      {
        "id": 9760047,
        "name": "smart酷炫假发",
        "productStatusName": "在售",
      },      
      {
        "id": 9760048,
        "name": "挤脚豆豆鞋",
        "productStatusName": "在售",
      },
      {
        "id": 9760049,
        "name": "旺仔紧身连体裤",
        "productStatusName": "在售",
      },
      {
        "id": 9760050,
        "name": "彼特斯降噪耳机",
        "productStatusName": "在售",
      },
      {
        "id": 9760051,
        "name": "猴米手机",
        "productStatusName": "在售",
      },
      {
        "id": 9760052,
        "name": "爱华键盘",
        "productStatusName": "在售",
      }
    ],
    selectedResult:[],
    multiple: false,
    radio: 0
  }),
  methods: {
    containerOptions() {
      return {
      }
    },
    tableOptions() {
      return {
        on: {
          'sort-change': () => {
            console.log('sortChange')
          }
        }
      }
    },
    runServer(param) {
      console.log('param1', param)
      const res = JSON.parse(JSON.stringify(this.productData))
      const resData = []
      const num = 5
      while (resData.length < num) {
        const temp = (Math.random() * res.length) >> 0
        resData.push(res.splice(temp, 1)[0])
      }
      return {
        data: (res && resData) || [],
        total: 100
      }
    },
    submitCallback(data) {
      this.selectedResult = data
      this.$message.success(`选中了${JSON.stringify(data)}`);
      console.log('submitCallback1', data)
    },
    radioChange(val) {
      this.multiple = Boolean(val)
      this.selectedResult = []
    }
  }
}
</script>
<style>
  table {
    border-collapse: collapse !important;
    margin: 0;
  }
  .wSelectMore {
    margin: 20px 0;
  }
</style>

:::

其他用法

slot default/filter用法展示。

slot.filter 的查询通过调用this.$refs.refName.customSearch(params) 调用组件内的方法实现数据更新

:::demo

<template>
  <div class='w-select-more' >
    <el-radio-group v-model="radio" @change='radioChange'>
      <el-radio :label="0">单选</el-radio>
      <el-radio :label="1">多选</el-radio>
    </el-radio-group>
    <w-select-more ref="wSelectMore" title='选择组件' :columns="myCloumns" rowKey='id' :multiple="multiple" :value="selectedResult" :serve="runServer" @change="submitCallback">
      <slot slot="default">
        <div v-if="multiple" class='tag-input' placeholder='请选择...' >
          <el-tag v-for="item in selectedResult" :key="item.id" closable @close="handleDeleteGood(item)">{{ item.name }}</el-tag>
        </div>
        <el-input v-else readonly placeholder='请选择...' :value='selectedResult.name'></el-input>
      </slot>
      <slot slot="filter">
        <el-input placeholder='自定义搜索/请输入商品ID搜索.../blahblahblah' v-model="customSearchKey" style="width:400px"></el-input>
        <el-button type="primary" @click="search">搜索</el-button>
      </slot>
    </w-select-more>
  </div>
</template>
<script>
export default {
  data: () => ({
    customSearchKey: '',
    myCloumns:[      
        { type: 'index', width: '100px' },
        { label: '商品id', prop: 'id', sortable: true },
        {
          label: '商品标题',
          prop: 'name',
          align: 'left'
        },
        {
          label: '状态',
          prop: 'productStatusName'
        },
        // {
        //   label: '商品主图',
        //   width: '120px',
        //   render: (row) => (
        //     <el-image
        //       src={row.picUrl}
        //       style="width:40px; height: 40px;"
        //       preview-src-list={[row.picUrl]}
        //     ></el-image>
        //   )
        // }
    ],
    productData: [
      {
        "id": 9760043,
        "name": "最鲜艳的红领巾",
        "productStatusName": "在售",
      },      
      {
        "id": 9760044,
        "name": "小黄帽",
        "productStatusName": "在售",
      },      
      {
        "id": 9760045,
        "name": "swag到爆的紫背心",
        "productStatusName": "在售",
      },      
      {
        "id": 9760046,
        "name": "潮流洞洞拖孩",
        "productStatusName": "在售",
      },      
      {
        "id": 9760047,
        "name": "smart酷炫假发",
        "productStatusName": "在售",
      },      
      {
        "id": 9760048,
        "name": "挤脚豆豆鞋",
        "productStatusName": "在售",
      },
      {
        "id": 9760049,
        "name": "旺仔紧身连体裤",
        "productStatusName": "在售",
      },
      {
        "id": 9760050,
        "name": "彼特斯降噪耳机",
        "productStatusName": "在售",
      },
      {
        "id": 9760051,
        "name": "10G手机",
        "productStatusName": "在售",
      },
      {
        "id": 9760052,
        "name": "紫檀木键盘",
        "productStatusName": "在售",
      }
    ],
    selectedResult:[],
    multiple: false,
    radio: 0
  }),
  methods: {
    runServer(param) {
      console.log('param2', param)
      const res = JSON.parse(JSON.stringify(this.productData))
      const resData = []
      const num = 5
      while (resData.length < num) {
        const temp = (Math.random() * res.length) >> 0
        resData.push(res.splice(temp, 1)[0])
      }
      return {
        data: (res && resData) || [],
        total: 100
      }
    },
    submitCallback(data) {
      this.selectedResult = data
      console.log('submitCallback2', data)
    },
    radioChange(val) {
      this.multiple = Boolean(val)
      this.selectedResult = []
    },    
    handleDeleteGood (good) {
      this.selectedResult.forEach((item, index) => {
        if (item.id === good.id) {
          this.selectedResult.splice(index, 1)
        }
      })
    },
    search() {
      const payload = {
        searchKey : this.customSearchKey
      }
      this.$refs.wSelectMore.customeSearch(payload)
    }
  }
}
</script>
<style>
  table {
    border-collapse: collapse !important;
    margin: 0;
  }  
  .tag-input {
    min-height: 38px;
    max-height: 96px;
    line-height: 38px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    padding: 0 15px;
    overflow: auto;
    cursor: pointer;
  }
  .el-tag {
    margin: 0 10px 5px 0;
  }
  .wSelectMore {
    margin: 20px 0;
  }
</style>

:::

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------------- | ---------------- | -------- | -------------- | --------------------------------- | | value | 传入的数据 | Object | —— | —— | | title | dialog标题 | String | —— | 请选择 | | dialogWidth | dialog宽度 | String | —— | 80% | | columns | 表格配置项 | Array | —— | columns | | rowKey | rowKey | String | —— | id | | serve | 获取表格数据接口 | Function | —— | serve | | manualClose | 手动关闭 | Boolean | —— | false | | multiple | 是否多选 | Boolean | true | false | false | | multipleLimit | 多选限制 | Number | —— | Infinity | | inlineBlock | 是否行内块元素 | Boolean | true | false | false | | paginationOptions | 分页配置 | Object | —— | paginationOptions |

| tableOptions | table 组件属性透传 | Object | {} | —— |

serve

interface param = {
  currentPage: Number | 1,
  pageSize: Number | 15,
  searchKey?: string | '' // 如果使用组件默认的搜索框
}
serve(param) {
  // 请求接口
  const res = ajax(param)
  return {
    data: (res && res.data) || [],
    total: (res && res.total) || 0
  }
},

columns

{
  'type': 'index' // 目前仅支持index
  'prop': '',
  'label': '',
  'key': '',
  'width': '',
  'formatter': 'render()=>{ }',
  'render-header': '',
  .....
  // 除了formatter/key，其他传入attr与与el-table的无差
}

paginationOptions

{
  pageSize: 15,
  pageSizes: [15, 30, 45, 60],
  pagerCount: 5,
  layout: 'total, sizes, prev, pager, next, jumper'
}

Events

| 事件名称 | 说明 | 参数 | | -------- | ---------------------- | ----- | | change | 确定选择提交的事件回调 | value | | input | 确定选择提交的事件回调 | |

slots

| slot名称 | 作用 | | -------- | ------------------------------------ | | default | 点击展示列表弹窗，确认后展示选中内容 | | filter | 弹窗筛选列表的输入框 |

其他备注

作者：宇称