VUE element-ui 之table表格第一行插入输入框

步骤：
模板中配置列：

<el-table-column label="序号" width="70" align="center"><template slot-scope="scope"><div v-if="scope.$index == 0" /><div v-else>{{ (scope.$index) }}</div></template></el-table-column><el-table-column label="订单编号" width="130" align="center" prop="purchase_order_num"><template slot-scope="scope"><div v-if="scope.$index == 0"> 注意：判断是第一行插入输入框或下拉菜单等，根据需求做调整<el-input v-model="inputVal" size="small" placeholder="点击输入编号" /></div><div v-else>{{ (scope.row.purchase_order_num) }}</div></template></el-table-column><el-table-column label="自编号" width="130" align="center" prop="project_name"><template slot-scope="scope"><div v-if="scope.$index == 0"><el-input v-model="inputVal" size="small" placeholder="点击输自编号" /></div><div v-else>{{ (scope.row.project_name) }}</div></template></el-table-column>

js部分：

data() {return {inputVal: '',Data: []},

// 更新数据upData() {dataDetail.getAl(this.params).then(res => {res.unshift({}) //注意：这一步不能省，否则表格展示数据还是从第一行开始（相当于将第一行数据替换为空）this.Data = res})}

看效果：

VUE element-ui 之table表格第一行插入输入框相关推荐

Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
vue+element UI的 table组件实现日历
有现成的日历插件但是不符合需求,所以项目中使用vue+element 的表格组件自己实现一个日历组件核心js部分:此部分为计算的当月的日期且包含是否可选,是否节假日等等可操作的标记,这部分基本是实现 ...
element ui的table表格因竖向滚动条导致表头错位问题解决
在vue项目中引入table组件,当将表格高度固定出现竖向滚动条,而且横向滚动条滚到最右边时,就会出现表头与内容错位的问题,如图解决方法: Step1:在app.vue中加入css样式 <st ...
vue+element ui实现树形表格加复选框（checkbox）
element ui中有带复选框的表格和树形数据的表格,不过呢,wo遇到一个新的需求,其中就是要实现树形表格和复选框的结合,尝试过很多方法,最后自己总结出一套,实现了全选,单选,多选. 效果图: 代码 ...
Vue经典实例之table表格奇偶行不同颜色、鼠标移入变色、点击变色，一看就明白
最主要就是用到属性的绑定 :class (动态绑定多个class) :class="[(k+1)%2==1?'trclock':'',curId==k?'trhover':'',select ...
Element UI 之table表格表头过长使用点点...显示，并添加鼠标移入悬浮显示
需求: 鼠标移入表头: 关键点: 1.样式中添加 .el-table .cell {word-break: keep-all !important;white-space: nowrap !impor ...
Element UI 之table表格的封装
需求: 鼠标移入: 实现: <template><el-tableclass="table-list":data="tableData"hei ...
Vue element怎么获取table表格当前行数据和索引值
怎么拿表格当前行数据平时我们在使用表格时通过template的slot-scope="scope",使用scope.row拿到当前行的数据 <el-table max-he ...
Element UI 的 table 单元格合并
项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...

VUE element-ui 之table表格第一行插入输入框

VUE element-ui 之table表格第一行插入输入框相关推荐

最新文章

热门文章