vue3.0+elementplus table动态添加column

妖狐艹你老母 2023-09-27 11:33 172阅读 0赞

<template>
      <el-table :data="tableData" border style="display: table-cell" ref="ymTable">
        <template v-for="val in test" :key="val.label" >
          <el-table-column :prop="val.prop" :label="val.label" width="200" />
        </template>
      </el-table>
      <el-button @click="cl">Default</el-button>
    </template>
    
    <script setup>
    import {ref} from 'vue'
    
    const ymTable = ref();
    
    const cl = ()=>{
      ymTable;
    }
    
    const test = [
      {
        prop: 'date',
        label: 'Date'
      },{
        prop: 'name',
        label: 'Name'
      },{
        prop: 'address',
        label: 'Address'
      }];
    
    const tableData = [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ]
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3.0+elementplus table动态添加column

<template> <el-table :data="tableData" border style="display: table-cell" ref=

妖狐艹你老母/ 2023年09月27日 11:33/ 0 赞/ 173 阅读

相关 element-plus table表头错位elementPlus表头错位

element-plus el-table 在页面放大时会出现表头和内容错位的情况现象![在这里插入图片描述][watermark_type_ZmFuZ3poZW5na

妖狐艹你老母/ 2022年11月13日 06:24/ 0 赞/ 634 阅读

相关 Vue在表格单元格（el-table-column）中添加超链接访问

<el-table-column show-overflow-tooltip label="操作"> <template slot-scope="scope

男娘i/ 2022年10月29日 03:14/ 0 赞/ 818 阅读

相关 Vue3 ElementPlus Admin

Vue3 Element Plus Admin 开箱即用的后管理系统。它基于vue3和element plus 实现。内置了动态路由，i18n国际化，动态权限菜单等功能 ✅

- 日理万妓/ 2022年10月14日 01:01/ 0 赞/ 640 阅读

相关 el-table-column嵌html,vue+elemenUI实现el-table-column行的上下移动

![b397671b4fe22dc4d492b7d936fc04eb.png][] 最带道术用量确示常构端析以要效开的用，近不后实现的效果，如图所示，第一行的向上按钮不可操作

怼烎@/ 2022年10月09日 00:48/ 0 赞/ 142 阅读

相关 JQuery动态给table添加、删除行

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] <html> <head> <SCRIPT la

冷不防/ 2022年10月02日 00:59/ 0 赞/ 224 阅读

相关 ORA-01747: user.table.column, table.column 或列说明无效

java.sql.SQLException: ORA-01747: user.table.column, table.column 或列说明无效这个出错的原因是因为表的列

不念不忘少年蓝@/ 2022年05月24日 10:18/ 0 赞/ 207 阅读

相关动态添加table tr td 表格

老规矩还是先看效果： ![70][] 样式有点丑，别在意外表 jsp 代码： <table border="1" style="width: 100%" bor

妖狐艹你老母/ 2022年05月09日 02:48/ 0 赞/ 279 阅读

相关 element table动态添加标签

原始显示是这样的： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

红太狼/ 2022年04月14日 04:42/ 0 赞/ 427 阅读

相关 element table动态添加列样式

项目是：vue-li+element-ui+axios+qs+vue-router框架当前样式表现为： ![watermark_type_ZmFuZ3poZW5naGVp

╰半橙微兮°/ 2022年04月14日 04:41/ 0 赞/ 309 阅读