vue 使用el-table循环生成表格的过程

目录
  • 使用el-table循环生成表格
    • el-table
  • 动态循环el-table的列

使用el-table循环生成表格

el-table

vue项目中使用element框架，提供的table组件使用起来过于繁杂，改成配置模式，循环生成表格！

配置前：

配置后：

动态循环el-table的列

<template>
  <div class="hello">
    <EncapTable ref="items" :Data="Data"></EncapTable>
  </div>
</template>
<script>
import EncapTable from "./EncapTable";
export default {
  name: "HelloWorld",
  components: {
    // 注册组件
    EncapTable
  },
  data() {
    return {
      Data: {
        tableData: [
          // 表单数据
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄"
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄"
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄"
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄"
          }
        ],
        tableTitle: [
          // 用于动态循环表头
          {
            prop: "date",
            label: "日期"
          },
          {
            prop: "name",
            label: "姓名"
          },
          {
            prop: "address",
            label: "地址"
          }
        ],
        // 一页显示多少条
        pageSize: 10,
        // 是否显示编辑和删除
        showEditAndDelete: true
      }
    };
  },
  mounted() {}
};
</script>
<style scoped></style>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue+Element中table表格实现可编辑（select下拉框）

    最近在工作中遇到一个问题,需要在表格中实现数据可编辑状态,具体情况是需要在单元格里加入下拉框:并且每个下拉框的数组数据是不一样的,具体是根据当前行前面数据的id查询而来,前面的是数据是动态生成的,后面的下拉框数据也是根据id动态生成的,内容不同:有点类似于树形二级状态,后面的下拉框数据来源并没有在前面内容里,而是另外一个接口查询,具体操作如下: HTML代码: 1.在处理人列加入一个下拉框模板,其中v-model必须要scope.row.proJbruserValue来绑定,意思是这个值绑定到当

  • VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

    VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

    先看看ElementUI里关于el-table的template数据结构: <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-tabl

  • vue完美实现el-table列宽自适应

    vue完美实现el-table列宽自适应

    背景 Element UI 是 PC 端比较流行的 Vue.js UI 框架,它的组件库基本能满足大部分常见的业务需求.但有时候会有一些定制性比较高的需求,组件本身可能没办法满足.最近在项目里就碰到了. 很多页面都需要用到表格组件el-table.如果没有给el-table-column指定宽度,默认情况下会平均分配给剩余的列.在列数比较多的情况,如果el-table宽度限定在容器内,单元格里的内容就会换行.强制不换行,内容要么在单元格内滚动,要么就会溢出或被截断. 产品想要的效果是:内容保持单

  • vue 使用el-table循环轮播数据列表的实现

    vue 使用el-table循环轮播数据列表的实现

    目录 使用el-table循环轮播数据列表 vue el-table简单轮播 使用el-table循环轮播数据列表 因为是在内网开发,安装插件导包进去非常麻烦,有条件的可以去下载插件实现,咱这里贴一下手撸的代码. 需要实现的效果大抵如下:(手机拍的,有些糊) 大部分实现的是监听是否到了div的底部,如果到了底部,就直接跳到顶部,这种体验感不是特别好,没有达到轮播的真正效果. 表格数据,devData我绑定了个空数组,因为实在是懒得敲了,按道理排名也应该是从api获取,而不是拿index. <te

  • vue 使用el-table循环生成表格的过程

    vue 使用el-table循环生成表格的过程

    目录 使用el-table循环生成表格 el-table 动态循环el-table的列 使用el-table循环生成表格 el-table vue项目中使用element框架,提供的table组件使用起来过于繁杂,改成配置模式,循环生成表格! 配置前: 配置后: 动态循环el-table的列 <template>   <div class="hello">     <EncapTable ref="items" :Data="

  • Vue.js如何利用v-for循环生成动态标签

    Vue.js如何利用v-for循环生成动态标签

    目录 前言 一.当写入数据为数组时 二.当写入数据为对象时 三.作用于标签属性和事件 总结 前言 使用v-for可以用于动态生成html标签.其实就是对于vue中属性是对象或者数组进行遍历生成新的标签. v-for就像java中的for循环一样,迭代需要的所有元素. 大多数情况是以一个数组嵌套多个对象的数据进行v-for循环 一.当写入数据为数组时 如果循环遍历得到的value值是一个对象,需要使用里面的值可以用 对象名.key 来调用key对应的value值 v-for写入数组的格式: arr

  • Asp.Net实现无限分类生成表格的方法(后台自定义输出table)

    本文实例讲述了Asp.Net实现无限分类生成表格的方法.分享给大家供大家参考,具体如下: 数据结构 monitor_group monitor_grp_id      monitor_grp_name     parent_id       level               childCount       orderby [int,自动递增]           [nvarchar,not null]      [int,not null]  [int,not null]   [int,

  • vue+element创建动态的form表单及动态生成表格的行和列

    动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v-if来渲染对应的表单,数据,事件什么的都可以动态的传进去,比较好用 <el-form size="mini" class="lj-form lj-form-s1"> <div v-for="(item,i) in table.custome

  • 封装Vue Element的table表格组件的示例详解

    在封装Vue组件时,我依旧会交叉使用函数式组件的方式来实现.关于函数式组件,我们可以把它想像成组件里的一个函数,入参是渲染上下文(render context),返回值是渲染好的HTML(VNode).它比较适用于外层组件仅仅是对内层组件的一次逻辑封装,而渲染的模板结构变化扩展不多的情况,且它一定是无状态.无实例的,无状态就意味着它没有created.mounted.updated等Vue的生命周期函数,无实例就意味着它没有响应式数据data和this上下文. 我们先来一个简单的Vue函数式组件

  • 如何封装Vue Element的table表格组件

    如何封装Vue Element的table表格组件

    在封装Vue组件时,我依旧会交叉使用函数式组件的方式来实现.关于函数式组件,我们可以把它想像成组件里的一个函数,入参是渲染上下文(render context),返回值是渲染好的HTML(VNode).它比较适用于外层组件仅仅是对内层组件的一次逻辑封装,而渲染的模板结构变化扩展不多的情况,且它一定是无状态.无实例的,无状态就意味着它没有created.mounted.updated等Vue的生命周期函数,无实例就意味着它没有响应式数据data和this上下文. 我们先来一个简单的Vue函数式组件

  • vue+element创建动态的form表单.以及动态生成表格的行和列

    动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v-if来渲染对应的表单,数据,事件什么的都可以动态的传进去,比较好用 复制代码  1 <el-form size="mini" class="lj-form lj-form-s1">  2             <div v-for="(i

  • Vue中Element的table多选表格如何实现单选

    Vue中Element的table多选表格如何实现单选

    目录 Element的table多选表格实现单选 vue table单选逻辑 Element的table多选表格实现单选 效果图 1.在多选表格的基础上进行处理, 呈现单选表格的作用 2.主要使用的是ElementUI多选表格中的方法 链接 2.1 select 事件 当用户手动勾选数据行的 Checkbox 时触发的事件 参数selection, row 2.2 row-click 事件 当某一行被点击时会触发该事件 参数 row, column, event 2.3 selection-ch

  • Vue.js实现可排序的表格组件功能示例

    Vue.js实现可排序的表格组件功能示例

    本文实例讲述了Vue.js实现可排序的表格组件功能.分享给大家供大家参考,具体如下: 我们基于 Vue.js 实现一个可根据某列进行排序的表格组件. 一个表格包含表头和数据两部分内容.因此,我们定义两个数组,columns 表示表头信息,在 <thread> 中渲染,并可在此指定某一列是否需要排序:data 表示数据. html: <div id="app" v-cloak> <v-table :data="data" :columns

  • Vue Cli与BootStrap结合实现表格分页功能

    1.首先需要在vue-cli项目中配置bootstrap,jquery 2. 然后新建vue文件,如index.vue,index.vue内容如下: 3.配置路由即可运行实现. <template> <div class="tTable container body-content"> <div class="form-group"> <div class="form-group"> <div

随机推荐