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

目录

文章目录

前言

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

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

第二种方式

总结

---

前言

有的时候因为需求,需要把一些数据通过输入框或者选择框来进行查询和渲染,这个时候数据多肯定是不能展示出来的,所以需要做一个弹窗,这个弹窗是一个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定义绑定的那些名称即可,可能说的不清楚不详细,但是用的话基本上没问题