官方组件库地址：Element - The world's most popular Vue UI framework
https://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>效果如下：
-
小伙伴， 如果有什么不懂的，都可以在官网文档找到结局方案，或者像我提问。