前言
有的时候因为需求,需要把一些数据通过输入框或者选择框来进行查询和渲染,这个时候数据多肯定是不能展示出来的,所以需要做一个弹窗,这个弹窗是一个table表格点击选中之后就会把此条数据渲染到指定位置
一、定义弹窗事件并绑定表格
1.@keyup.space.native="sendmessage()"//这行代码是通过空格触发弹窗事件,加到自己的组件即可
2.data中定义
//弹框
getmessage: false,3.sendmessage() {
this.getmessage = true
this.handleCurrents()
},4.与表格绑定
<el-dialog title="输入大写拼音码回车查询" :visible.sync="getmessage" width="37%" :show-close="false" >
<el-input style="top: -20px;" :data="epcSheept" v-model="epcSheept.pym" placeholder="请输入内容" @keyup.enter.native="getysksdata">
</el-input>
<el-table :data="epcSheept" style="width: 100%;top: -20px;" height="400" @current-change="handleClick" @row-click="getmessage = false"
row-class-name="tableRowClass">
<el-table-column prop="diagcode" label="诊断编码" width="245%" align="center">
</el-table-column>
<el-table-column prop="diagname" label="诊断名称" width="245%" align="center">
</el-table-column>
</el-table>
<el-pagination background @current-change="pageNoChange" :current-page.sync="currentPage.pageNo" :page-size="10"
layout="total, prev, pager, next" :total="currentPage.total" style="margin-top: 0;">
</el-pagination>
</el-dialog>
这里的表格涉及到分页技术感兴趣的可以去看我另一篇文章:
Oracle/vue前后端分页_Luffe船长的博客-CSDN博客
二、获取选中的数据并渲染
代码如下(示例):
tableRowClass(row, rowIndex) {
row.row_index = rowIndex;
},
handleClick(row, event, column) {
this.currentRowInedx = row.row_index
let html = '<option>' + row.row_index + '</option>';
let id = document.getElementById("id");
id.append(html);
this.queryInfos.dscgMainDiseCodg = row.diagcode
this.queryInfos.dscgMainDiseName = row.diagname
},
第二种方式
1.@current-change="handleCurrentChange"//和上面一样的道理加到自己的组件中即可
2.:row-key="getRowKey"//加到和1同一个组件位置上,这是获取数据的绑定
3.在data中定义
getRowKey(row) {
return row.sheetId;},//这个是根据我这个id进行指定渲染的
3. //点击查询明细
handleCurrentChange(val) {
let that = this;
that.queryInfos = JSON.parse(JSON.stringify(val));
this.$forceUpdate()
},4.与自己的表单或者表格绑定就可以了
<el-form :model="queryInfos" :rules="addqueryInfos" ref="insertPriceList" label-width="100px" label-position="left"
style="padding: 1%;" v-if="update"></el-form>
总结
上面那些技术就是定义好自己的时间之后,就可以写获取数据了,那获取到数据之后就很好办了,指定渲染的话直接取出数据给要展示的地方组件进行赋值就行,需要全部渲染那直接就把data定义绑定的那些名称即可,可能说的不清楚不详细,但是用的话基本上没问题