1.1.7 • Published 2 years ago
w-select-more v1.1.7
@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 | 弹窗筛选列表的输入框 |
其他备注
作者:宇称