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="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 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="3"> ???????????????????????<icon type="ios-notifications-outline" size="26" 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: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>iview table icon dorpdown html页面级别vue组件
原文地址：https://www.cnblogs.com/pengchenggang/p/10341327.html