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

2022年7月28日11:17:59

步骤:
模板中配置列:

<el-table-columnlabel="序号"width="70"align="center"><templateslot-scope="scope"><divv-if="scope.$index == 0"/><divv-else>{{ (scope.$index) }}</div></template></el-table-column><el-table-columnlabel="订单编号"width="130"align="center"prop="purchase_order_num"><templateslot-scope="scope"><divv-if="scope.$index == 0"> 注意:判断是第一行插入输入框或下拉菜单等,根据需求做调整<el-inputv-model="inputVal"size="small"placeholder="点击输入编号"/></div><divv-else>{{ (scope.row.purchase_order_num) }}</div></template></el-table-column><el-table-columnlabel="自编号"width="130"align="center"prop="project_name"><templateslot-scope="scope"><divv-if="scope.$index == 0"><el-inputv-model="inputVal"size="small"placeholder="点击输自编号"/></div><divv-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表格第一行插入输入框

  • 作者:赫兹/Herzz
  • 原文链接:https://blog.csdn.net/HanXiaoXi_yeal/article/details/122369247
    更新时间:2022年7月28日11:17:59 ,共 932 字。