vue element 中的table动态渲染实现(动态表头)

发布时间:2020-10-22 14:40:09 作者:yw00yw
来源:脚本之家 阅读:640

通过在vue中使用element的table表格,实现数据动态渲染,并且动态渲染表头。通过在父组件中引入子组件表格,然后向子组件传递表格数据和表头数据。

子组件table中template模板

<el-table 
  :data="this.tableData"
  height="400px" 
  max-height="400px" 
  size="small"
  row-class-name="row"
  cell-class-name="column"
  :row-
  :cell-
  :highlight-current-row="true"
  @cell-click="cellClick"
  fit
  >
  <el-table-column
    v-for="(item, index) in tableLabel"
    :key="index" 
    :prop="item.prop" 
    :width="item.width" 
    :label="item.label">
  </el-table-column>
</el-table>

接收父组件传过来的数据

props: {
 tableData: { // 父组件传递过来的表格数据
    type: Array,
    default: []
  },
  tableLabel: { // 父组件传递过来的表头数据
    type: Array,
    default: () => {
      return []
    }
  }
}

父组件

<file-table 
 :tableData="tableData"
 :tableLabel="tableLabel"
>
</file-table>


data() {
 return {
 // 子组件的表格数据
 tableData: [
  {id: 1, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 2, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 3, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 4, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 5, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 6, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 7, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 8, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 9, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 10, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 11, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05},
  {id: 12, date: '2018-07-24', sales: 23.34, sale: 137597.76, const: 102203.71, profit: 35394.05}
 ],
 // 子组件的表头数据
 tableLabel: [
      {label: '', width: '40', prop: 'id'},
      {label: '日期', width: '', prop: 'date'},
      {label: '销售量', width: '', prop: 'sales'},
      {label: '销售额', width: '', prop: 'sale'},
      {label: '成本', width: '', prop: 'const'},
      {label: '利润', width: '', prop: 'profit'}
    ]
 }
}

问题:这种方式只能在一个组件中动态渲染,但是当我们需要操作每一列数据的时候,没法操作,因为element table再带的方法是每个单元格点击事件,而不符合我们需求,如何能实现表格动态渲染,并且每个组件都能使用,还能够实现操作的可控的列,下节分享。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。

推荐阅读:
  1. vue+render+jsx实现可编辑动态多级表头table的实例代码
  2. Vue+elementui 实现复杂表头和动态增加列的二维表格功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue element table

上一篇:css如何实现波浪线和立方体

下一篇:云服务器为什么这么贵啊

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》