vue3.0+elementplus table动态添加column

妖狐艹你老母 2023-09-27 11:33 201阅读 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 条评论，201人围观）

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

相关阅读

相关 Web前端-Vue el-table el-table-column 每行row添加多个input输入框

页面布局如下 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

Myth丶恋晨/ 2023年10月03日 14:22/ 0 赞/ 8 阅读

相关 vue3.0+elementplus 动态添加menu菜单

<template> <el-aside width="200px"> <el-menu router>

深藏阁楼爱情的钟/ 2023年09月29日 15:52/ 0 赞/ 32 阅读

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

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

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

相关 Vue动态添加组件

【Vue】动态添加组件 [https://www.microanswer.cn/blog/9][https_www.microanswer.cn_blog_9] 超链接[

你的名字/ 2023年06月25日 10:17/ 0 赞/ 39 阅读

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

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

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

相关 Vue3 ElementPlus Admin

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

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

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

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

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

相关动态添加table tr td 表格

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

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

相关 element table动态添加标签

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

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

相关 element table动态添加列样式

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

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