element ui / vue 表格组件

ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。

官网地址：http://element-cn.eleme.io/#/zh-CN

在页面上引入 js 和 css 文件即可开始使用，如下：

<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

 

设置表格组件

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入element得css样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css"/>
    <!--引入vue得js文件 这个必须在element之前引入-->
    <script type="text/javascript" src="js/vue.js"></script>
    <!--element得js文件-->
    <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
   <!--创建一个标签使vue挂载到该标签上-->
   <div id="app">
       <!--:data==绑定了vue中定义得数据tableData
           border表示设置表格边框
           el-table-column:表示列标签
              prop:该属性得名称必须和tableData中对象得属性名一致。
              label：表格得标题
              width: 设置列得宽度
       -->
       <el-table
               :data="tableData"
               border
               style="width: 100%">
           <el-table-column
                   prop="date"
                   label="日期"
                   >
           </el-table-column>
           <el-table-column
                   prop="name"
                   label="姓名"
                   >
           </el-table-column>
           <el-table-column
                   prop="address"
                   label="地址">
           </el-table-column>
           <el-table-column
                   fixed="right"
                   label="操作"
                   >
               <template slot-scope="scope">
                   <el-button type="text" size="small">查看</el-button>
                   <el-button type="text" size="small">编辑</el-button>
               </template>
       </el-table>
   </div>
</body>
<!--表示自定义得js文件-->
<script>
      var app=new Vue({
           el:"#app",
           data:{
                tableData:[
                    {"date":"2020-05-11","name":"张三","address":"北京"},
                    {"date":"2021-05-11","name":"李四","address":"郑州"},
                    {"date":"2022-05-11","name":"五五","address":"杭州"},
                    {"date":"2023-06-11","name":"六六","address":"上海"},
                ],
           }
      })
</script>
</html>

 

 

REF

https://blog.csdn.net/Ysuhang/article/details/125058537

Element-UI-快速入门（极简教程）

https://blog.csdn.net/qq_33820545/article/details/108529789

https://blog.csdn.net/m0_52711377/article/details/123705574

https://element.eleme.cn/#/zh-CN/component/layout

 

posted @ 2022-09-19 22:15  emanlee  阅读(332)  评论(0)  编辑  收藏  举报