iview table icon dorpdown html页面级别vue组件

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>iview example</title>

    <link rel="stylesheet" type="text/css" href="./assets/iview/styles/iview.css">

    <script type="text/javascript" src="./assets/vue/vue.min.js"></script>

    <script type="text/javascript" src="./assets/iview/iview.min.js"></script>

</head>

<body>

<div id="app">

    <Layout>

        <Header>

          <div style="height:60px;margin-left:30px;

          margin-right:10px;

          line-height:60px; color:#fff; font:bold; float:left; ">

            <div style="height:10px;"></div>

            <span><img src="./assets/dang.png" width="" height="" /></span></div>

            <div style="float:left; height: 60px; line-height: 60px;

            font-size:22px;

            font-family: 微软雅黑; font-weight: bold; color:#fff;">

                iview example</div>

                <div style="float:right; margin-right:20px;">

                    <div style="height:12px;"></div>

                    <dropdown>

                            <a href="javascript:void(0)">

                                gfsd

                                    <!-- <icon type="ios-color-palette" style="color:#fff" /> -->

                                    <Icon type="md-arrow-dropdown" />

                                    <icon type="ios-arrow-down" style="color:#fff" />

                                </a>

                        <dropdown-menu slot="list">

                            <dropdown-item>驴打滚</dropdown-item>

                            <dropdown-item>炸酱面</dropdown-item>

                        </dropdown-menu>

                    </dropdown>

                    <!-- <i-icon type="md-square" style="color:#eee;" /> -->

                    <Badge style="margin-right: 20px;" :count="">

                        <icon type="ios-notifications-outline" size="" style="color:#fff;"></icon>

                    </Badge>

                    <i-button>退出</i-button>

                </div>

        </Header>

        <Content>

          <div style="height:15px;"></div>

          <Card class="table-card" shadow style="width:1500px;margin:0 auto; text-align: center;">

              <img src="./assets/3-1.jpg" style="margin:0 auto;" />

          </Card>

          <div style="height:15px;"></div>

            <Card class="table-card" shadow style="width:1500px;margin:0 auto;">

            <i-input search enter-button="搜 索"

            placeholder="iview example"

            style="width:800px; margin-left: 10px;" ></i-input>

            <div style="height:15px;"></div>

            <i-table border :columns="columns12" :data="data6" style="width:1450px; margin:0 auto;">

                <template slot-scope="{ row }" slot="photo">

                  <img :src="row.photo" style="margin:5px 0 0 0;" />

                </template>

            </i-table>

            <div style="height:15px;"></div>

          </Card>

          <div style="height:60px;"></div>

        </Content>

        <Footer :style="{position: 'fixed', width: '100%'}">iview example</Footer>

    </Layout>

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            visible: false,

            value1:,

            columns12: [

                    {

                        title: 'iview example',

                        key: 'name',

                        align: 'center'

                    },

                    {

                        title: 'iview example',

                        slot: 'photo',

                        width:,

                        align: 'center'

                    },

                    {

                        title: 'iview example',

                        key: 'sex',

                        align: 'center'

                    },

                    {

                        title: 'iview example',

                        key: 'iview example1',

                        align: 'center'

                    },

                    {

                        title: 'iview example',

                        key: 'iview example2',

                        align: 'center'

                    },

                    {

                        title: 'iview example',

                        key: 'iview example3',

                        align: 'center'

                    },

                    {

                        title: 'iview example',

                        key: 'iview example4',

                        align: 'center'

                    },

                    {

                        title: 'iview example',

                        key: 'iview example5',

                        align: 'center'

                    },

                    {

                        title: 'iview example',

                        key: 'iview example6',

                        align: 'center'

                    }

                ],

                data6: [

                    {

                        name: 'iview example',

                        photo:'assets/face4.jpg',

                        sex: '女',

                        chushengnianyue: '1981.6',

                        rudangshijian:'iview example',

                        zhiwu:'iview example',

                        suozaidanwei:'iview example',

                        xueli:'iview example',

                        xuewei:'iview example'

                    }

                ]

        },

        methods: {

            show1: function () {

                this.visible = true;

            },

            show (index) {

                this.$Modal.info({

                    title: 'User Info',

                    content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`

                })

            },

            remove (index) {

                this.data6.splice(index, );

            }

        }

        ,created () {

        //页面加载

        this.$Notice.config({

            top: window.innerHeight -

        });

                this.$Notice.open({

                    title: '消息提醒',

                    desc: `iview example。

<br><br>

、iview example。`,

                    duration: ,

                });

        }

    })

  </script>

  <style>

    .ivu-card{

      -webkit-box-shadow:  1px 6px rgba(,,,.);

    box-shadow:  1px 6px rgba(,,,.);

    border-color: #eee;

  }

  .table-card {

    /* height: calc(100vh - 196px); */

  }

  footer { background-color: #2b85e4; z-index: ;}

  footer,.ivu-layout-footer {

  height: 40px;

  padding: 10px 50px !important;

  color: #fff !important;

  text-align: center;

  position: relative;

  bottom:;

}

Header { height:60px; background-image: url("./assets/t.png");

background-size: % 60px; }

/* Content { height: calc(100vh - 60px);} */

  </style>

</body>

</html>

iview table icon dorpdown html页面级别vue组件 #vuez#的更多相关文章

  1. html页面引入vue组件

    html页面引入vue组件需要在页面引入http-vue-loader.js 注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发 ...

  2. Vue组件化开发

    Vue的组件化 组件化是Vue的精髓,Vue就是由一个一个的组件构成的.Vue的组件化设计到的内容又非常多,当在面试时,被问到:谈一下你对Vue组件化的理解.这时候又有可能无从下手,因此在这里阐释一下 ...

  3. Vue 实现 登陆后打开主页面（登陆组件 + 主页面组件）

    本次演示,项目所需iview,router 首先 在 views 目录 新建 两个 组件 ( login.vue ,index.vue ) login.vue <template> < ...

  4. iview table 实现在数据中自定义标识

    做了一个商旅订票的项目,在详情中有一个因公超标在表格中用一个“超”字显示的需求.后台框架用的iview+vue,也就是在iview Table中改变.在iview的框架中改变东西首先要想到的是ivie ...

  5. FineUI页面级别的参数配置

    Theme: 控件主题,目前支持三种主题风格(blue/gray/access,默认值:blue) Language: 控件语言(en/zh_CN/zh_TW/...,默认值:zh_CN) FormM ...

  6. 使用表类型（Table Type-SqlServer）实现百万级别的数据一次性毫秒级别插入

    使用表类型(Table Type)实现百万级别的数据一次性插入 思路 1 创建表类型(TaBleType)         2 创建添加存储过程         3 使用C#语言构建一个DataTab ...

  7. iview table里面 插入下拉列表组件（自定义组件）一定要加key，不加key，table开始会加载所有数据，然后再从第2页点回第一页，就会走onChange事件，混乱的逻辑，切记加：key

    iview table里面 插入下拉列表组件(自定义组件)一定要加key,不加key,table开始会加载所有数据,然后再从第2页点回第一页,就会走onChange事件,混乱的逻辑,切记加:key 关 ...

  8. iview table 普通表格样式

    iview table 普通表格样式 https://run.iviewui.com/UvLFPMb0 <template> <table> <thead> < ...

  9. iview table 已选项的数据 this.$refs.tables.$refs.tablesMain.getSelection()

    iview table 已选项的数据 this.$refs.tables.$refs.tablesMain.getSelection() 由于我这里table组件是套了两层组件 所以是进入了两个层次拿 ...

随机推荐

  1. noip2010引水入城

    https://www.zybuluo.com/ysner/note/1334997 这道题fst了 题面 戳我 解析 我一开始的想法是,按照高度给第一行排序,然后贪心地选取目前到不了的,高度最高的第 ...

  2. 笔记本电脑处理器(CPU)性能排行榜

    笔记本电脑处理器(CPU)性能排行榜 本排行榜随新款处理器(CPU)的发布而随时更新.更新日期:2012年7月15日   排名 型号 二级+三级缓存 前端总线(MHz) 功率(瓦) 主频(MHz) 核 ...

  3. gulp 实现 js、css,img 合并和压缩(转)

    前提条件,知道如何安装nodejs.gulp,这里不做介绍,可以自行google 实现此功能需要安装的gulp工具有如下 npm install gulp-htmlmin gulp-imagemin ...

  4. 老天待我不薄，又来这么一题POJ1753

    还是位运算+BFS系列题: 现在这种真是无比喜欢,今天搞了一上午这题...因为状态的改变写错了-T.T #include<cstdio> #include<queue> #in ...

  5. Phoenix在2345公司的实践（转）

    本文介绍Phoenix在2345公司的实践,主要是实时查询平台的背景.难点.Phoenix解决的问题.Phoenix-Sql的优化以及Phoenix与实时数仓的融合思路.具体内容如下: 实时数据查询时 ...

  6. hadoop wordcount程序缺陷

    在wordcount 程序的main函数中,没有读取运行环境中的各种参数的值,全靠hadoop系统的默认参数跑起来,这样做是有风险的,最突出的就是OOM错误. 自己在刚刚学习hadoop编程时,就是模 ...

  7. P1218 过路费

    奋斗了两天,终于写过了这道题...... 这道题不仅要求最短路,还要加上路径上最大的点权: 先用结构体记录点的序号和点的值这是毋庸置疑的:再用另外一个数组来记录当前点权也是可以理解的,毕竟后面要排序: ...

  8. android 百度地图

    展示当前位置地图 参考百度定位demo (LocationDemo) 实现此功能,运行发现 BDLocationListener 的onReceiveLocation方法无法执行,原因是 Androi ...

  9. socket_IO模型

    1 背景知识 1.1 用户空间和内核空间 比如32位系统,寻址空间是4G.内存分为用户空间和内核空间,内核空间仅供内核使用,用户空间给各个进程使用.os的核心是内核,只有内核可以访问被保护的内存空间. ...

  10. Mysql的外键

    概念:如果一个实体A的某一字段,刚好指向或引用另一个实体B的主键,那么实体A的这个字段就叫作外键,所以简单来说,外键就是外面的主键,就是其他表的主键. 例: 以上的学生表的班级字段,就是一个外键! 其 ...