element-ui 使用TreeTable例子

最新推荐文章于 2024-05-11 16:37:28 发布

五千年前的后羿

最新推荐文章于 2024-05-11 16:37:28 发布

阅读量5.0k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_34696203/article/details/103737787

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>




    <meta charset="UTF-8">
    <title>Layui树形表格2.x演示</title>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
   
<body>
  <div id="app">
<template>
    <el-table  :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
>
      <el-table-column 
        v-for="col in cols"
        :prop="col.prop" :label="col.label" :width="col.width" >
      </el-table-column>
    </el-table>
    

  </template>
</div>
</body>
   
<script>
 var Main = {
    data() {
      return {
        tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小',
              address: '上海市普陀区金沙江路 19 弄',
              children: [{
              id: 33,
              date: '2016-05啥顶顶顶顶顶顶顶顶顶顶-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 34,
              date: '2016阿打算的撒大大大叔-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
                 children: [{
              id: 35,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 36,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
          }]
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],

           cols: [
             {prop: 'id', label: 'id'},

            {prop: 'date', label: '日期'},
            {prop: 'name', label: '姓名'},
             {prop: 'address', label: '地址',width:"800px"},
              {prop: 'date', label: '日期'},
            {prop: 'name', label: '姓名'},
             {prop: 'address', label: '地址'},
              {prop: 'date', label: '日期'},
            {prop: 'name', label: '姓名'},
             {prop: 'address', label: '地址'},
              {prop: 'date', label: '日期'},
            {prop: 'name', label: '姓名'},
             {prop: 'address', label: '地址'},
              {prop: 'date', label: '日期'},
            {prop: 'name', label: '姓名'},
             {prop: 'address', label: '地址'},
          ]
      }
    },
    methods: {
      load(tree, treeNode, resolve) {
        setTimeout(() => {
          resolve([
            {
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ])
        }, 1000)
      }
    },
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>


</html>

这里与本篇文章无关

喜欢二次元动漫的小伙伴可以微信扫一扫关注一下哟，点赞关注，鼓励一下博主呦
在这里插入图片描述

五千年前的后羿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
element-ui 使用TreeTable例子

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Layui树形表格2.x演示</title> <meta name="renderer" content="webkit"> &lt...
复制链接

扫一扫