image.png
hello word
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
</script>
</html>
安装
1.使用csdn
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2.不使用vue-cli,普通前端项目开发
下载vue axios 等等同理
- 使用npm 初始项目
npm init
- 下载elementUI
npm i element-ui
-
找到下载的element-ui依赖
image.png
image.png
-
复制到自己的项目中
image.png
-
使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="./element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return { visible: false }
}
})
</script>
</html>
1.自定义el-table中的内容
<el-table-column prop="fields" label="标签" width="180">
<template slot-scope="scope">
<div>
<ul>
<li v-for="item in JSON.parse(scope.row.fields)">{{item.field}}</li>
</ul>
</div>
</template>
</el-table-column>
2.导航栏展开后子菜单宽度多出1px问题
elementui中的一个小坑
el-menu默认样式border-right-width: 1px;所以我们只要修改一下样式就好。
.el-menu{
border-right-width: 0;
}
3.el-backtop组件不起作用
可以直接写如下样子（简单页面，复杂页面还在研究）
<el-backtop></el-backtop>
4.elementui导航栏和侧边栏固定 只有内容可以上下滑动
此问题转载于https://blog.csdn.net/hotqin888/article/details/88755918
element的Container 布局容器如下，可是如何保证header和aside固定呢？
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
官方例子：
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
原来是要将container页面高度固定，height: 500px
实际使用过程中，可以获取屏幕高度，然后用vue中的ref获取对象
html:
<template>
<div id="app">
<el-container ref="homePage">
script:
export default {
name: 'App',
data(){
return {
clientHeight:'',
}
},
mounted(){
// 获取浏览器可视区域高度
this.clientHeight = `${document.documentElement.clientHeight}`
//document.body.clientWidth;
//console.log(self.clientHeight);
window.onresize = function temp() {
this.clientHeight = `${document.documentElement.clientHeight}`;
};
},
watch: {
// 如果 `clientHeight` 发生改变，这个函数就会运行
clientHeight: function () {
this.changeFixed(this.clientHeight)
}
},
methods:{
changeFixed(clientHeight){ //动态修改样式
// console.log(clientHeight);
// console.log(this.$refs.homePage.$el.style.height);
this.$refs.homePage.$el.style.height = clientHeight-20+'px';
},
},
}
关键是用 this.el.style.height = clientHeight-20+'px';
4.show-overflow-tooltip 属性和<el-link></el-link> 同时使用文字截断失效
4.1在elementui 的 table 组件中 我们可以通过 show-overflow-tooltip 属性来让溢出的文字自动截断
<el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
4.2如果表格内容是复杂类型的数据要自己处理的时候可以这样写
<el-table :data="tableData">
<el-table-column type="index" width="50"></el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
<template slot-scope="scope">
<span>
{{scope.row.address}}
</span>
</template>
</el-table-column>
</el-table>
注意，如果想让show-overflow-tooltip生效一定要加<span></span>
4.3 show-overflow-tooltip 和 <el-link></el-link> 同时使用的时候 文字截断失效了QAQ。
但是a标签是可以使用的
<el-table-column prop="address" label="地址" show-overflow-tooltip>
<template slot-scope="scope">
<span>
<a href="https://www.baidu.com" class="my-a" target="_block">
{{scope.row.address}}
</a>
</span>
</template>
</el-table-column>
解决办法只能是将a标签的css改为和<el-link></el-link>一样的样式
.my-a {
font-weight: 500;
font-size: 14px;
text-decoration: none;
color: #606266;
}
.my-a {
cursor: pointer;
}
.my-a:link {
color: #606266;
text-decoration: none;
}
.my-a:active {
color: #409EFF;
}
.my-a:visited {
color: #606266;
text-decoration: none;
}
.my-a:hover {
color: #409EFF;
text-decoration: underline;
}
5.el-container全屏
/*
找到html标签、body标签，和挂载的标签
都给他们统一设置样式
*/
html,
body,
#app,
.el-container {
/*设置内部填充为0，几个布局元素之间没有间距*/
padding: 0px;
/*外部间距也是如此设置*/
margin: 0px;
/*统一设置高度为100%*/
height: 100%;
background-color: cadetblue;
}
网友评论