1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > VUE element-ui 之table表格第一行插入输入框

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

时间:2023-10-28 03:59:03

相关推荐

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})}

看效果:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。