iview table icon dorpdown html页面级别vue组件 #vuez#
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 >
<Layout>
<Header>
<div style="height:60px;margin-left:30px;
margin-right:10px;
line-height:60px; color:#fff; font:bold; float:left; ">
<div ></div>
<span><img src="./assets/dang.png" width="30" height="30" /></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 >
<div ></div>
<dropdown>
<a href="javascript:void(0)">
gfsd
<!-- <icon type="ios-color-palette" /> -->
<Icon type="md-arrow-dropdown" />
<icon type="ios-arrow-down" />
</a>
<dropdown-menu slot="list">
<dropdown-item>驴打滚</dropdown-item>
<dropdown-item>炸酱面</dropdown-item>
</dropdown-menu>
</dropdown>
<!-- <i-icon type="md-square" /> -->
<Badge :count="3">
<icon type="ios-notifications-outline" size="26" ></icon>
</Badge>
<i-button>退出</i-button>
</div>
</Header>
<Content>
<div ></div>
<Card class="table-card" shadow >
<img src="./assets/3-1.jpg" />
</Card>
<div ></div>
<Card class="table-card" shadow >
<i-input search enter-button="搜 索"
placeholder="iview example"
></i-input>
<div ></div>
<i-table border :columns="columns12" :data="data6" >
<template slot-scope="{ row }" slot="photo">
<img :src="row.photo" />
</template>
</i-table>
<div ></div>
</Card>
<div ></div>
</Content>
<Footer :fixed', width: '100%'}">iview example</Footer>
</Layout>
</div>
<script>
new Vue({
el: '#app',
data: {
visible: false,
value1:0,
columns12: [
{
title: 'iview example',
key: 'name',
align: 'center'
},
{
title: 'iview example',
slot: 'photo',
width:130,
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, 1);
}
}
,created () {
//页面加载
this.$Notice.config({
top: window.innerHeight - 210
});
this.$Notice.open({
title: '消息提醒',
desc: `iview example。
<br><br>
2、iview example。`,
duration: 0,
});
}
})
</script>
<style>
.ivu-card{
-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.2);
box-shadow: 0 1px 6px rgba(0,0,0,.2);
border-color: #eee;
}
.table-card {
/* height: calc(100vh - 196px); */
}
footer { background-color: #2b85e4; z-index: 100;}
footer,.ivu-layout-footer {
height: 40px;
padding: 10px 50px !important;
color: #fff !important;
text-align: center;
position: relative;
bottom:0;
}
Header { height:60px; background-image: url("./assets/t.png");
background-size: 100% 60px; }
/* Content { height: calc(100vh - 60px);} */
</style>
</body>
</html>