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. 动态编译c#脚本(把c#当作脚本执行)

    csscript动态编译C#脚本 This document contains information about the CLR based scripting system CS-Script ( ...

  2. 初学者遇到的PostgreSQL字符集问题的解决

    当初学者在使用PostgreSQL数据库,输入中文时,会遇到“ERROR:  invalid byte sequence for encoding "UTF8": 0xd6d0”的 ...

  3. 【205】C#实现远程桌面访问

    参考:Remote Desktop using C#.NET 参考文件:TscForm.zip 本博客主要是讲述怎样用 .NET 平台中 Microsoft Terminal Services Cli ...

  4. 最优灌溉_最小生成树Kruskal

    问题描述 雷雷承包了很多片麦田,为了灌溉这些麦田,雷雷在第一个麦田挖了一口很深的水井,所有的麦田都从这口井来引水灌溉. 为了灌溉,雷雷需要建立一些水渠,以连接水井和麦田,雷雷也可以利用部分麦田作为“中 ...

  5. Android笔记---常用控件以及用法

    这篇文章主要记录下Android的常用控件以及使用的方法,Android 给我们提供了大量的UI控件,合理地使用这些控件就可以非常轻松地编写出相当不错的界面,这些是Android学习的基础,没有什么业 ...

  6. PTA【复数相乘】

    队友在比赛时A掉的.吊吊吊!!! 主要考虑这些情况吧||| 案例: /* 3i i -3 i -1-i 1+i i 1 -1-i -1-i */ -3 -3i -2i i 2i #include &l ...

  7. bzoj 1478: Sgu282 Isomorphism && 1815: [Shoi2006]color 有色图【dfs+polya定理】

    参考 https://wenku.baidu.com/view/fee9e9b9bceb19e8b8f6ba7a.html?from=search### 的最后一道例题 首先无向完全图是个若干点的置换 ...

  8. bzoj 1207: [HNOI2004]打鼹鼠【dp】

    跟简单的dp,设f[i]表示前i只最多打几只,因为起点不确定,所以f[i]可以从任意abs(x[i]-x[j])+abs(y[i]-y[j])<=abs(time[i]-time[j])的j&l ...

  9. IT兄弟连 JavaWeb教程 Servlet表单乱码问题

    在使用原生的Servlet进行Web应用开发时经常会遇到一些中文乱码问题,造成乱码问题的原因只有一个:即客户端与服务端的字符编码不一致所导致的. 请求参数乱码问题 服务器端获取客户端传递过来的数据出现 ...

  10. 我的spring-boot开发环境

    我的spring-boot开发环境,目的方便我快速搭建开发环境,同时可以最佳实践.使用spring-boot 2.1.x. 代码地址:GitHub my-springboot-examples 目的是 ...