不知道怎么描述這個(gè)東西了。。el-select下拉框大家都知道，但是下拉框只能選擇一個(gè)，而且如果數(shù)據(jù)太多的話也不太容易選擇，所以這里就是封裝了組件包含對(duì)應(yīng)的彈窗，就是能實(shí)現(xiàn)多選，而且列表也是分頁展示的，選擇完之后將對(duì)應(yīng)的名稱展示在文本框中，傳給后端對(duì)應(yīng)的用逗號(hào)隔開（用什么隔開都可以，跟后端商量）的id
大致的效果圖就是：?
?
這個(gè)關(guān)聯(lián)合同就是我們封裝的，輸入框添加了disabled，不可編輯的，只能通過點(diǎn)擊右側(cè)彈窗來進(jìn)行選擇。點(diǎn)擊彈窗之后的效果圖：?
這里我們要考慮的就是：
- 點(diǎn)擊彈窗要展示出列表，進(jìn)行選擇，選擇完之后點(diǎn)擊確定要將對(duì)應(yīng)的名稱展示出來，多個(gè)就用逗號(hào)隔開，然后拿到對(duì)應(yīng)id對(duì)應(yīng)賦值。
- 第二就是回顯的問題，當(dāng)我們選擇完之后再次點(diǎn)擊彈窗，這時(shí)候要將我們已選擇數(shù)據(jù)在列表上進(jìn)行回顯勾選，后臺(tái)返回?cái)?shù)據(jù)的時(shí)候，我們要根據(jù)id依次查詢對(duì)應(yīng)的數(shù)據(jù)，將對(duì)應(yīng)的名稱展示出來，然后點(diǎn)擊彈窗的時(shí)候同樣的進(jìn)行數(shù)據(jù)回顯勾選?
這里直接附上代碼：?
index.vue?
<template>
<div>
<el-input placeholder="請(qǐng)選擇" :size="size" :disabled="inpDisabled" style="line-hight:40px" v-model="name" class="input-with-select">
<el-button slot="append" :disabled="btnDisabled" @click="showUserSelect" icon="el-icon-search"></el-button>
</el-input>
<!-- 合同列表 -->
<ContractSelectDialog
ref="contractSelect"
@doSubmit="selectionsToInput"
:selectData="selectData"
:single="single"
/>
</div>
</template>
<script>
import ContractSelectDialog from './contractSelectDialog'
import ContractService from '@/api/contract/ContractService'
export default {
data () {
return {
name: '',
selectData: [],
contractService: null
}
},
props: {
size: {
type: String,
default: 'small'
},
value: {
type: String,
default: ''
},
btnDisabled: {
type: Boolean,
default: false
},
inpDisabled: {
type: Boolean,
default: true
},
single: { // 是否啟用單選
type: Boolean,
default: false
}
},
components: {
ContractSelectDialog
},
created () {
this.contractService = new ContractService()
},
watch: {
value: {
handler (newVal) {
this.selectData = []
if (newVal) {
newVal.split(',').forEach((id) => { // 回顯拿數(shù)據(jù)
this.contractService.queryById(id).then(({data}) => {
if (data && data.id !== '') {
this.selectData.push(data)
}
})
})
}
},
immediate: true,
deep: false
},
selectData: {
handler (newVal) {
this.name = newVal.map(contract => contract.contractName).join(',')
},
immediate: false,
deep: false
}
},
methods: {
// 設(shè)置選中
selectionsToInput (selections) {
this.selectData = selections
this.$emit('getInfo', this.selectData)
},
// 顯示列表
showUserSelect () {
this.$refs.contractSelect.init()
}
}
}
</script>
<style>
.el-form-item__content .el-input-group {
vertical-align: middle;
}
.el-tag + .el-tag {
margin-left: 5px;
margin-bottom: 5px;
}
</style>對(duì)應(yīng)的彈窗組件?
<template>
<div>
<el-dialog
title="合同選擇"
width="1000px"
:close-on-click-modal="false"
:append-to-body="true"
v-dialogDrag
class="userDialog"
:visible.sync="visible"
>
<el-container style="height: 500px">
<el-container>
<el-header style="text-align: left; font-size: 12px; height: 30px">
<el-form
size="small"
:inline="true"
ref="searchForm"
:model="searchForm"
@keyup.enter.native="refreshList()"
@submit.native.prevent
>
<el-form-item prop="contractNo">
<el-input
size="small"
v-model="searchForm.contractNo"
placeholder="合同編號(hào)"
clearable
></el-input>
</el-form-item>
<el-form-item prop="contracntName">
<el-input
size="small"
v-model="searchForm.contracntName"
placeholder="合同名稱"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="refreshList()"
size="small"
icon="el-icon-search"
>查詢</el-button
>
<el-button
@click="resetSearch()"
size="small"
icon="el-icon-refresh-right"
>重置</el-button>
</el-form-item>
</el-form>
</el-header>
<el-main>
<el-table
:data="dataList"
v-loading="loading"
size="small"
border
ref="contractTable"
@select="handleSelectionChange"
height="calc(100% - 40px)"
style="width: 100%"
>
<el-table-column
type="selection"
header-align="center"
align="center"
width="50"
>
</el-table-column>
<el-table-column
prop="contractNo"
header-align="center"
align="left"
sortable="custom"
min-width="90"
label="合同編號(hào)"
>
</el-table-column>
<el-table-column
prop="contractName"
header-align="center"
align="left"
sortable="custom"
min-width="90"
label="合同名稱"
>
</el-table-column>
<el-table-column
prop="contractAmount"
header-align="center"
align="left"
sortable="custom"
min-width="110"
label="合同金額"
>
</el-table-column>
<el-table-column
prop="oppositeCompany"
header-align="center"
align="center"
sortable="custom"
min-width="110"
label="對(duì)方單位"
>
</el-table-column>
<el-table-column
prop="signDate"
header-align="center"
align="left"
sortable="custom"
min-width="110"
label="簽訂時(shí)間"
>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageNo"
:page-sizes="[5, 10, 50, 100]"
:page-size="pageSize"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
>
</el-pagination>
</el-main>
</el-container>
</el-container>
<span slot="footer" class="dialog-footer">
<el-button
size="small"
@click="visible = false"
icon="el-icon-circle-close"
>關(guān)閉</el-button
>
<el-button
size="small"
type="primary"
icon="el-icon-circle-check"
@click="doSubmit()"
>確定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
searchForm: {
contractNo: '',
contracntName: ''
},
dataListAllSelections: [], // 所有選中的數(shù)據(jù)包含跨頁數(shù)據(jù)
idKey: "id", // 標(biāo)識(shí)列表數(shù)據(jù)中每一行的唯一鍵的名稱(需要按自己的數(shù)據(jù)改一下)
dataList: [],
pageNo: 1,
pageSize: 10,
total: 0,
orders: [],
loading: false,
visible: false,
};
},
props: {
selectData: {
type: Array,
default: () => {
return [];
},
},
// 是否啟用單選
single: {
type: Boolean,
default: false
}
},
methods: {
init() {
this.visible = true;
this.$nextTick(() => {
this.dataListAllSelections = JSON.parse(JSON.stringify(this.selectData));
this.resetSearch();
});
},
// 獲取數(shù)據(jù)列表
refreshList() {
this.loading = true;
this.$http({
url: "/contract/list", // 自己的接口路徑
method: "get",
params: {
current: this.pageNo,
size: this.pageSize,
orders: this.orders,
...this.searchForm,
},
}).then(({ data }) => {
this.dataList = data.records;
this.total = data.total;
this.pageNo = data.current;
this.loading = false;
this.$nextTick(() => {
this.setSelectRow();
});
});
},
// 每頁數(shù)
sizeChangeHandle(val) {
this.pageSize = val;
this.pageNo = 1;
this.refreshList();
},
// 當(dāng)前頁
currentChangeHandle(val) {
this.pageNo = val;
this.refreshList();
},
// 排序
resetSearch() {
this.$refs.searchForm.resetFields();
this.refreshList();
},
// 選中數(shù)據(jù)
handleSelectionChange(selection, row) {
if (this.single && selection.length > 1) {
this.$refs.contractTable.clearSelection();
this.$refs.contractTable.toggleRowSelection(row);
}
this.dataListAllSelections = this.single ? [row] : selection
},
// 設(shè)置選中的方法
setSelectRow() {
this.$refs.contractTable.clearSelection();
if (!this.dataListAllSelections || this.dataListAllSelections.length <= 0) {
return;
}
for (let i = 0; i < this.dataList.length; i++) {
if (this.dataListAllSelections.some(item => item[this.idKey] == this.dataList[i][this.idKey])) {
// 設(shè)置選中，記住table組件需要使用ref="table"
this.$refs.contractTable.toggleRowSelection(this.dataList[i], true);
}
}
},
doSubmit() {
this.visible = false;
this.$emit("doSubmit", this.dataListAllSelections);
},
},
};
</script>
<style lang="scss">
.userDialog {
.el-dialog__body {
padding: 10px 0px 0px 10px;
color: #606266;
font-size: 14px;
word-break: break-all;
}
.el-main {
padding: 20px 20px 5px 20px;
.el-pagination {
margin-top: 5px;
}
}
}
</style>使用：?文章來源：http://www.zghlxwxcb.cn/news/detail-509827.html
組件默認(rèn)是多選，可以傳入single為true來啟用單選文章來源地址http://www.zghlxwxcb.cn/news/detail-509827.html
?
<template>
<div>
<el-form
size="small"
:model="inputForm"
ref="inputForm"
v-loading="loading"
:disabled="formReadOnly"
label-width="120px"
>
<el-row :gutter="15">
<el-col :span="12">
<el-form-item label="關(guān)聯(lián)合同" prop="associatedContracts" :rules="[]">
<ContractSelect
:value="inputForm.associatedContracts"
@getInfo="getContranct"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
import ContractSelect from '@/components/contractSelect/index.vue'
export default {
data() {
return {
title: '',
method: '',
visible: false,
loading: false,
inputForm: {
id: '',
associatedContracts: '', // 關(guān)聯(lián)合同
},
}
},
components: { ContractSelect },
methods: {
// 關(guān)聯(lián)合同
getContranct(selections) {
this.inputForm.associatedContracts = selections.map(item => item.id).join(',')
}
}
}
</script>到了這里，關(guān)于基于Element-ui 表單彈窗列表選擇封裝的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
