饿了么(elementUI)组件库如何在vue项目中使用?
官方组件库地址:Element - The world's most popular Vue UI frameworkelementui是做PC项目的首选创建项目并引入element组件库用vue-cli脚手架创建vue项目找一个合适的文件夹,打开cmd窗口,用vue create 创建项目命令:vue create 自定项目名vue create element-demo------------
官方组件库地址:Element - The world's most popular Vue UI frameworkhttps://element.eleme.cn/#/zh-CN
elementui是做PC项目的首选
创建项目并引入element组件库
用vue-cli脚手架创建vue项目
找一个合适的文件夹,打开cmd窗口,用vue create 创建项目
命令:vue create 自定项目名
vue create element-demo
-------------------------------
? Please pick a preset:
> Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
直接 回车
注意:
-
vue create
命令会自动创建文件夹,这样就不需要我们手动创建了 -
选择Vue2 版本的默认配置
-
如果vue create 命令不能正常运行,要先安装脚手架工具, 对应的命令是: npm i -g @vue/cli
然后运行vue项目:命令: npm run serve 输入http://localhost:8080 查看
把ElementUI添加到项目中
参考官网文档,按全局引入的方式,一共分成两步:
-
安装elementUI 命令:npm i element-ui -S
-
在项目的main.js中引入使用
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
上面的写法是固定模式,可随时去官网查看。
使用elementUI组件
在官网文档中查看 使用步骤 cv即可
举个简单的例子:我们用一个 button按钮的组件
如果我们想用这个第一排的 这些button按钮,只需要cv
在举一个例子:当我们想要那种进度条的组件可以在elementUI官网里面找 如下:
作用域插槽的使用方法
1. slot-scope是固定写法
2. scope理解为变量,并不一定需要固定这个名字,el-table-column组件会自动将渲染本行需要的数据
传给scope,其中scope.row就表示当前行的数据,它对应数据源中的某个对象。这里的row是固定写法
3. {{ 方法() }} 的作用是执行这个方法,将返回值显示在当前单元格中
table组件-自定义列-显示图片
把图片显示在表格中:
<template>
<div>
<el-table :data="tableData">
<el-table-column
label="公司名"
prop="companyName">
</el-table-column>
<el-table-column
label="公司logo"
prop="companyLogo">
</el-table-column>
<el-table-column
label="公司logo"
>
<!--
slot-scope: 是老语法,
v-slot :是新语法。效果一样
-->
<template slot-scope="scope">
<!-- {{scope.row.companyLogo}} -->
<img :src="scope.row.companyLogo"/>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data () {
return {
tableData: [{
companyName: '小米',
companyLogo: "http://s02.mifile.cn/assets/static/image/logo-mi2.png"
},
{
companyName: '京东',
companyLogo:"https://misc.360buyimg.com/lib/img/e/logo-201305-b.png"
},
{
companyName: '百度',
companyLogo:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
}
]
}
}
}
</script>
pagination-翻页组件
<!--按钮顺序: layout="prev(上一个), pager(中间), next(下一个)" -->
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
-
layout中的关键字有自己的含义;
-
total用来设置数据的总条数
-
Tree树形组件
-
Tree组件的基础使用
-
举个例子:
<template> <div> <h1>tree树形控件</h1> <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" ></el-tree> </div> </template> <script> export default { data() { return { data: [ { label: "项目经理 张大大", children: [ { label: "产品小亮", children: [ { label: "小丽", }, { label: "大光", }, ], }, { label: "UI小美", children: [ { label: "小高", }, ], }, { label: "前后端老马", children: [ { label: "小刘", }, { label: "小华", }, { label: "小李", }, ], }, { label: "测试-老王", children: [ { label: "小赵", }, { label: "小强", }, ], }, { label: "运维老李", children: [ { label: "小涛", }, ], }, ], }, ], defaultProps: { children: "children", label: "label", }, }; }, methods: { handleNodeClick(data) { console.log(data); }, }, }; </script> <style> </style>
效果如下:
-
小伙伴, 如果有什么不懂的,都可以在官网文档找到结局方案,或者像我提问。
更多推荐
所有评论(0)