1.打开表格
//父组件引入 <customerChoose ref="customerChooseRef" @onSure="setOrderInfoFn"></customerChoose>//子传父，接收值，操作private async setOrderInfoFn(data) {this.form.customerId = data.idthis.form.customerName = data.customerName}打开dialog表格：
private async chooseMultiFn(type) {await this.$nextTick();(this.$refs.customerChooseRef as any).opendialog(this.titles,this.form.customerId)}2.表格的template写法
<template><el-dialog :show-close="false" title="选择客户" :visible.sync="customerDialogVisible" top="0px" width="1000px" center :close-on-click-modal="false" destroy-on-close append-to-body><div style="width: 100%; height: 500px"><el-form :inline="true" :model="customerQueryCondition"><el-form-item label="客户编码:"><el-input v-model="customerQueryCondition.customerCode" clearable placeholder="请输入客户编码"></el-input></el-form-item><el-form-item label="客户名称:"><el-input v-model="customerQueryCondition.customerName" clearable placeholder="请输入客户名称"></el-input></el-form-item><el-form-item><el-button class="seachBtn" @click="searchOrReset(false)"><i class="el-icon-search"></i>{{ $t('i18n.search') }}</el-button><el-button class="seachBtn" @click="searchOrReset(true)"><i class="el-icon-refresh"></i>{{ $t('i18n.reset') }}</el-button></el-form-item></el-form><el-table size="small" header-row-class-name="monitorTable" stripe :data="tableData" height="400px" highlight-current-row border style="width: 100%" ref="myELTable" @row-click="chooseRadio"><el-table-column label="" width="50" align="center"><template scope="scope"><el-radio :label="scope.$index" name="radiobutton" v-model="radio"></el-radio></template></el-table-column><el-table-column prop="customerCode" label="客户编码" align="center"></el-table-column><el-table-column prop="customerName" label="客户名称" align="center"></el-table-column><el-table-column prop="address" label="客户地址" align="center"></el-table-column></el-table></div><el-pagination :background="true" :current-page.sync="pageInfo.current" :page-size="pageInfo.size" layout="total,sizes, prev, pager, next, jumper, slot" :total="pageInfo.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top:20px;"><el-button style="margin-left: 5px" type="primary" @click="handleCurrentChange(pageInfo.current)">跳转</el-button></el-pagination><div slot="footer" class="dialog-footer"><el-button @click="onCancelChoose">{{ $t('i18n.cancelBtn') }}</el-button><el-button type="primary" @click="onSureChoose">{{ $t('i18n.sureBtn') }}</el-button></div></el-dialog>
</template>3 .打开后操作：
打开后的初始化操作：
private titlesOption: string = ''public opendialog(titles,customerId) {// 用户id，用于一开始勾选回显，没有就不勾this.customerId = customerId// 标题this.titlesOption = titles// 客户查询条件 一开始设为空this.customerQueryCondition = {}this.queryCache = {}this.openCustomerChooseDialog()}public async openCustomerChooseDialog() {this.radio = ''//获取表格数据let res = await getCustomerInfo(this.pageInfo.current, this.pageInfo.size, this.queryCache.customerCode || '', this.queryCache.customerName || '', '')this.tableData = res.datathis.pageInfo.total = res.totalDataCount//打开弹窗this.customerDialogVisible = trueif (this.customerId) {this.$nextTick(() => {// 初始化回显勾选this.radio = this.tableData.findIndex((item) => item.id == this.customerId)})}}
表格单选：
//单选下标
private radio: any = ''//存储选中行的数据private currentSelectedRow: any = {}//@row-click="chooseRadio" 选中某一行private async chooseRadio(e) {this.tableData.filter((item, index) => {if (e.id == item.id) this.radio = index})this.currentSelectedRow = e}4.点击确定后的操作
//用于子传父
@Emit('onSure')private onSure(row: any) {}// 确定private async onSureChoose(e) {//把勾选的值传到父页面操作this.onSure(this.currentSelectedRow)this.customerDialogVisible = false}
)
)
