elementui+vue.js table动态添加列且添加动态的绑定值

本文介绍了如何在Vue.js项目中结合ElementUI库,实现表格动态添加和删除列的功能,并详细讲解了如何为新增列设置动态绑定值,提升用户体验。
摘要由CSDN通过智能技术生成
html部分:

<el-table-column  v-for="(item,index) in table3.tableTitle" :lable="item.label" :key="index" :prop="item.prop" align="center">
  <template slot-scope="{row, index}">
    <el-input  size="small" type="number" v-model="row[item.prop]" style="text-align:center"></el-input>
  </template>
</el-table-column>

data部分:

table3: {
  total: null,//总条数
  page: 1,//页码
  page_count: 30,//每页条数
  //表头样式
  table_header: {
    'background-color': '#f8f8f9',
    'height': '20px!important',
    'color': '#515a6e',
  },
  //表格数据
  table_data: [{
    id: '1',
    name: '重',
    unit:'KG',

  }, {
    id: '2',
    name: '长',
    unit:'CM',

  }, {
    id: '3',
    name: '宽',
    unit:'CM',
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值