zoukankan      html  css  js  c++  java
  • 普通element ui table组件的使用

    1.使用基础的element ui 的table的基础使用

    首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件

    废话不多说,直接引入element 最基础的table原型

        说明:tableData数据格式是数组对象,el-table-column的prop对应数组对象的属性,label为表头名称

     <template>
        <el-table
          :data="tableData"
          style=" 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
      </template>
    
      <script>
        export default {
          data() {
            return {
              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 弄'
              }]
            }
          }
        }
      </script>

    样式效果如下

    1.加入固定表头

    在原来的内容里面加上height="200",就会产生如下效果

     ..<el-table
          :data="tableData"
          height="200"
          style=" 100%">...

     2.加入固定列

    在需要固定列的对应el-table-column     加上fixed属性,当宽度超过设置的table宽度的时候,就会出现滚动条,为了实现超出,我把table宽度设小

    <el-table
          :data="tableData"
          height="200"
          style=" 600px">
          <el-table-column
            prop="date"
            fixed   
            label="日期"
            width="180">
          </el-table-column>

    3.加入边框  加入边框属性   border

    <el-table
          :data="tableData"
          height="200"
          style=" 600px"
         border
    >
    

      

    4.左边实现树

    在el-table 处加入  :tree-props="{children: 'children', hasChildren: 'hasChildren'}", 以及row-key="id"  并且在数据部分加入children的层级数据

    <el-table
          :data="tableData"
          height="200"
          style=" 600px"
         border
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    数据格式加入几个数据,需要展示树层级的,加入children的属性下的对象
    {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
              children: [{
                  date: '2016-05-01',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1519 弄'
                }, {
                  date: '2016-05-01',
                  name: '王小虎',
                  address: '上海市普陀区金沙江路 1519 弄'
              }]
            }。。。

    默认是收缩的,如果要默认展开就在el-table 加入属性default-expand-all  

     

  • 相关阅读:
    [导入]Zanzarah: The Hidden Portal Cheats
    [导入]Zanzarah Walkthrough
    Each的实现
    关于SQL命令中不等号(!=,<>)
    获取当前运行函数及调用函数
    MVC3.0学习2Razor视图引擎基础语法
    MVC 3.0 学习1
    java.io.IOException: Too many open files错误解决方案
    linux下执行命令输出乱码解决方案
    通用代码引擎生成工具 XDoclet 介绍
  • 原文地址:https://www.cnblogs.com/xuqp/p/11655958.html
Copyright © 2011-2022 走看看