elementUI点击table表格的一条数据渲染到input输入框内

目录

文章目录

前言

一、定义弹窗事件并绑定表格

二、获取选中的数据并渲染

第二种方式

总结

---

前言

有的时候因为需求,需要把一些数据通过输入框或者选择框来进行查询和渲染,这个时候数据多肯定是不能展示出来的,所以需要做一个弹窗,这个弹窗是一个table表格点击选中之后就会把此条数据渲染到指定位置

---

一、定义弹窗事件并绑定表格

[email protected]="sendmessage()"//这行代码是通过空格触发弹窗事件,加到自己的组件即可

2.data中定义    

//弹框
getmessage: false,

3.sendmessage() {
                this.getmessage = true
                this.handleCurrents()
            },

4.与表格绑定

                                
                                
                                                                  row-class-name="tableRowClass">
                                    
                                    
                                    
                                    
                                
                                                                  layout="total, prev, pager, next" :total="currentPage.total" style="margin-top: 0;">
                                
                            
 

这里的表格涉及到分页技术感兴趣的可以去看我另一篇文章:

Oracle/vue前后端分页_Luffe船长的博客-CSDN博客

二、获取选中的数据并渲染

代码如下（示例）：

tableRowClass(row, rowIndex) {
                row.row_index = rowIndex;
            },
            handleClick(row, event, column) {
                this.currentRowInedx = row.row_index
                let html = '' + row.row_index + '';
                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.与自己的表单或者表格绑定就可以了

                     style="padding: 1%;" v-if="update">

总结

上面那些技术就是定义好自己的时间之后,就可以写获取数据了,那获取到数据之后就很好办了,指定渲染的话直接取出数据给要展示的地方组件进行赋值就行,需要全部渲染那直接就把data定义绑定的那些名称即可,可能说的不清楚不详细,但是用的话基本上没问题