当前位置:   article > 正文

vue2+element-ui 小结_vue2 element

vue2 element

遇到一个沙雕的产品(还是另外一个部门的领导),三天能写完的前端写了一个月,刚开始的需求能用就行,不需要ui,自己看着设计就行,到后来各种需求各种有,项目经理沟通n次,多次反悔,受到了前端、后台、项目经理、UI的diss,最后让UI做了个效果图,争取今天中午跟沙雕说拜拜。

项目主要技术是vue2+element-ui,后台是python+mongodb,再次总结一下vue2+element-ui的使用方法,让新人少踩些坑(当然我也是菜鸟)。

一、vue2+element-ui基本使用

1. 搭建环境

  1. 安装nodejs
  2. 安装cnpm和配置阿里镜像(这一步可以跳过,只是为了加快下载速度)
  3. 全局安装vue-cli,即cnpm i vue-cli -g
  4. 用vue-cli 创建一个项目,即vue init webpack demo(demo是我项目文件夹),期间选择需要的依赖,我只用了vue-router,创建完之后大概长这样。

2. 安装element-ui

2.1 进入项目文件夹,cnpm i element-ui -S 等待安装完成

2.2 找到项目文件夹下main.js ,增加三行代码,如下:

  1. // The Vue build version to load with the `import` command
  2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  3. import Vue from 'vue'
  4. import App from './App'
  5. import router from './router'
  6. // 这三行是增加的
  7. import ElementUI from 'element-ui'
  8. import 'element-ui/lib/theme-chalk/index.css'
  9. Vue.use(ElementUI)
  10. Vue.config.productionTip = false
  11. /* eslint-disable no-new */
  12. new Vue({
  13. el: '#app',
  14. router,
  15. components: { App },
  16. template: '<App/>'
  17. })

2.3 具体element-ui咋用看文档吧,文档说的很详细:https://element.eleme.cn/#/zh-CN/component/button

二、vue2 路由和传值实现

1. 路由注册

每个路由都要进行注册,在项目文件夹下src/router/index.js里边进行注册,哪个vue叫啥名字,这个vue对应的url是多少。

另外:@表示src文件夹

2.路由跳转和传值

2.1 常规跳转,这个path就是注册时对应的path

  1. this.$router.push({
  2. path: "/index"
  3. });

2.2 带参数,并把参数放到URL后边,类似于get方式

  1. this.$router.push({
  2. path: '/editCardetail',
  3. query: {
  4. id: 10
  5. }
  6. })

2.3 带参数,不把参数放URL后边,类似于POST方式,这里的name就是注册时的name

  1. this.$router.push({
  2. name: "MatchDetail",
  3. params: {
  4. info: info
  5. }
  6. });

三、vue2 如何发送http请求

注意: 不要用vue-resource,用axios!!

官方文档:http://www.axios-js.com/zh-cn/docs/

1. 安装axios

cnpm install --save axios

2. 封装一下(看个人喜好)

request.js 仅提供思路和框架,不提供代码本身

  1. import axios from "axios"
  2. import {
  3. baseURL
  4. } from "./../assets/js/POJO"
  5. // 创建axios实例
  6. const service = axios.create({
  7. baseURL: baseURL, // api 的 base_url
  8. timeout: 1200000 // 请求超时时间
  9. })
  10. service.interceptors.request.use(
  11. config => {
  12. config.headers['Authorization'] = "JWT " + sessionStorage.getItem("token")
  13. config.headers['Content-Type'] = 'application/json'
  14. return config
  15. },
  16. error => {
  17. console.log(error) // for debug
  18. Promise.reject(error)
  19. }
  20. )
  21. export default service

3. 在具体的业务封装一下请求

  1. import request from "./request"
  2. function getCompaniesByUsername(username) {
  3. return request({
  4. url: "/sign-up/companys",
  5. method: "get",
  6. params: {
  7. flt_username_equals: username
  8. }
  9. })
  10. }
  11. function addCompany(data) {
  12. return request({
  13. url: "/sign-up/companys",
  14. method: "post",
  15. data: data
  16. })
  17. }
  18. function updateCompany(data) {
  19. return request({
  20. url: "/sign-up/companys",
  21. method: "put",
  22. data: data
  23. })
  24. }
  25. function removeCompany(id) {
  26. return request({
  27. url: "/sign-up/companys",
  28. method: "delete",
  29. params: {
  30. id: id
  31. }
  32. })
  33. }
  34. function getCompanyByUserAndCompanyName(username, deviceName) {
  35. return request({
  36. url: "/sign-up/companys",
  37. method: "get",
  38. params: {
  39. flt_username_equals: username,
  40. flt_name_equals: deviceName
  41. }
  42. })
  43. }
  44. const companyService = {};
  45. companyService.addCompany = addCompany;
  46. companyService.getCompaniesByUsername = getCompaniesByUsername;
  47. companyService.updateCompany = updateCompany;
  48. companyService.removeCompany = removeCompany;
  49. companyService.getCompanyByUserAndCompanyName = getCompanyByUserAndCompanyName;
  50. export default companyService

4. 应用

仅粘贴部分代码

  1. add() {
  2. let that = this;
  3. let companyIsValid = that.company.isValid();
  4. if (companyIsValid) {
  5. // 要提交到后台的数据,只有四项基本信息
  6. let company = that.company;
  7. // 上传到后台
  8. let data = {
  9. name: company.name,
  10. shortName: company.shortName,
  11. address: company.address,
  12. introduction: company.introduction
  13. };
  14. companyService
  15. .addCompany(data)
  16. .then(function(res) {
  17. if (res.data.code == 201) {
  18. that.$parent.$alert("添加成功", "提示");
  19. that.$parent.getAllCompanies();
  20. that.reset();
  21. } else {
  22. this.$alert("添加失败", "提示");
  23. }
  24. })
  25. .catch(function(error) {
  26. console.log(error);
  27. });
  28. } else {
  29. this.$alert("请补全所有必填信息后提交", "提示");
  30. return;
  31. }
  32. }

四、怎么写组件

看一个效果图

 这种能复用的东西就适合做成组件,比如这个弹出框,增加和修改都是同样的参数,只是提交的方法不一样。下面简单介绍一下组件怎么写。

1. 先写组件(就是要复用的那块结构)

compform.vue,值得注意的是,组件自己的东西写到data里边,一些控制信息写道props里边,回显的时候让父组件给子组件传值(传值方法很多,这里介绍我用的那种方法)

  1. <template>
  2. <div>
  3. <el-dialog :title="isAdd ? '新增公司' : '编辑公司'" :visible.sync="dialog">
  4. <el-form ref="company" :model="company" :rules="company_rules" label-width="100px">
  5. <el-form-item label="公司名称" prop="name">
  6. <el-input size="small" v-model="company.name" :disabled="disabledName" placeholder="请输入公司名称"></el-input>
  7. </el-form-item>
  8. <el-form-item label="公司简称" prop="shortName">
  9. <el-input size="small" v-model="company.shortName" placeholder="请输入公司简称"></el-input>
  10. </el-form-item>
  11. <el-form-item label="公司地址" prop="address">
  12. <el-input size="small" v-model="company.address" placeholder="请输入公司地址"></el-input>
  13. </el-form-item>
  14. <el-form-item label="公司介绍" prop="introduction">
  15. <el-input rows="4" type="textarea" v-model="company.introduction" placeholder="请输入公司介绍"></el-input>
  16. </el-form-item>
  17. </el-form>
  18. <div slot="footer" class="dialog-footer">
  19. <el-button class="update-btn" type="primary" @click="doSubmit">提交</el-button>
  20. <el-button class="update-btn" @click="cancel">取消</el-button>
  21. </div>
  22. </el-dialog>
  23. </div>
  24. </template>
  25. <script>
  26. import deviceService from "./../../api/device";
  27. import teamService from "./../../api/team";
  28. import companyService from "./../../api/company";
  29. import {
  30. Device,
  31. Photo,
  32. Team,
  33. Company,
  34. Competitor,
  35. baseURL,
  36. PassiveRadarDev,
  37. OptoelecDev,
  38. TDOADev,
  39. RadarDev
  40. } from "./../../assets/js/POJO";
  41. import util from "./../../util/util";
  42. export default {
  43. props: {
  44. isAdd: {
  45. type: Boolean,
  46. required: true
  47. }
  48. },
  49. data() {
  50. return {
  51. disabledName:true,
  52. company: new Company(),
  53. company_rules: {
  54. name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
  55. shortName: [
  56. { required: true, message: "请输入公司简称", trigger: "blur" }
  57. ],
  58. address: [
  59. { required: true, message: "请输入公司地址", trigger: "blur" }
  60. ],
  61. introduction: [
  62. { required: true, message: "请输入公司介绍", trigger: "blur" }
  63. ]
  64. },
  65. dialog: false
  66. };
  67. },
  68. methods: {
  69. cancel() {
  70. this.reset();
  71. },
  72. reset() {
  73. this.dialog = false;
  74. this.$refs.company.clearValidate();
  75. this.company = new Company();
  76. },
  77. doSubmit() {
  78. if (this.isAdd) {
  79. this.add();
  80. } else {
  81. this.update();
  82. }
  83. },
  84. add() {
  85. let that = this;
  86. let companyIsValid = that.company.isValid();
  87. if (companyIsValid) {
  88. // 要提交到后台的数据,只有四项基本信息
  89. let company = that.company;
  90. // 上传到后台
  91. let data = {
  92. name: company.name,
  93. shortName: company.shortName,
  94. address: company.address,
  95. introduction: company.introduction
  96. };
  97. companyService
  98. .addCompany(data)
  99. .then(function(res) {
  100. if (res.data.code == 201) {
  101. // 获取父组件指针,执行父组件方法
  102. that.$parent.$alert("添加成功", "提示");
  103. that.$parent.getAllCompanies();
  104. that.reset();
  105. } else {
  106. this.$alert("添加失败", "提示");
  107. }
  108. })
  109. .catch(function(error) {
  110. console.log(error);
  111. });
  112. } else {
  113. this.$alert("请补全所有必填信息后提交", "提示");
  114. return;
  115. }
  116. },
  117. update() {
  118. let that = this;
  119. companyService.updateCompany(that.company).then(res => {
  120. that.$parent.$alert("修改成功", "提示");
  121. that.$parent.getAllCompanies();
  122. that.reset();
  123. });
  124. }
  125. }
  126. };
  127. </script>

2. 写父组件,并引用子组件(刚才写的有复用功能的组件)

  1. <template>
  2. <div>
  3. <Header></Header>
  4. <div class="content-box">
  5. <!-- 参赛人员信息 -->
  6. <div class="content">
  7. <Title title="公司信息汇总">
  8. <el-button type="primary" @click="toAdd">添加</el-button>
  9. </Title>
  10. <el-table
  11. :data="companies"
  12. :header-cell-style="getRowClass"
  13. stripe
  14. border
  15. style="width: 100%"
  16. >
  17. <el-table-column prop="name" label="公司名称"></el-table-column>
  18. <el-table-column prop="shortName" label="公司简称"></el-table-column>
  19. <el-table-column prop="address" label="公司地址"></el-table-column>
  20. <el-table-column prop="introduction" label="公司介绍"></el-table-column>
  21. <el-table-column fixed="right" label="操作">
  22. <template slot-scope="scope">
  23. <el-button
  24. icon="el-icon-edit"
  25. circle
  26. @click.native.prevent="toUpdate(scope.row)"
  27. type="primary"
  28. size="small"
  29. ></el-button>
  30. <el-button
  31. icon="el-icon-delete"
  32. circle
  33. @click.native.prevent="removeCompany(scope.$index)"
  34. type="primary"
  35. size="small"
  36. ></el-button>
  37. </template>
  38. </el-table-column>
  39. </el-table>
  40. </div>
  41. </div>
  42. <compForm ref="compform" :is-add="isAdd"></compForm>
  43. </div>
  44. </template>
  45. <style scoped>
  46. </style>
  47. <script>
  48. import Title from "@/components/Title";
  49. import Header from "@/components/Header";
  50. import "element-ui/lib/theme-chalk/index.css";
  51. import "./../assets/css/index.css";
  52. import axios from "axios";
  53. import { fail } from "assert";
  54. import { Company, baseURL } from "./../assets/js/POJO";
  55. import compForm from "./module/compform";
  56. export default {
  57. data() {
  58. return {
  59. isAdd: true,
  60. companySet: new Set(),
  61. URL: baseURL,
  62. companies: [],
  63. // 要添加的公司对象
  64. company: new Company()
  65. };
  66. },
  67. mounted() {
  68. this.getAllInfos();
  69. this.getAllCompanies();
  70. },
  71. methods: {
  72. toAdd() {
  73. this.isAdd = true;
  74. // 这里获取到了子组件,要传值可以直接通过这个指针
  75. const _this = this.$refs.compform;
  76. _this.company = new Company();
  77. _this.dialog = true;
  78. _this.disabledName = false;
  79. },
  80. toUpdate(row) {
  81. this.isAdd = false;
  82. // 这里获取到了子组件,要传值可以直接通过这个指针
  83. const _this = this.$refs.compform;
  84. _this.dialog = true;
  85. _this.company = row;
  86. _this.disabledName = true;
  87. },
  88. getAllInfos() {
  89. },
  90. // 设置表头背景色
  91. getRowClass({ row, column, rowIndex, columnIndex }) {
  92. if (rowIndex === 0) {
  93. return "background: rgba(213,213,213,0.24)";
  94. }
  95. },
  96. // 删除公司
  97. removeCompany(index) {
  98. }
  99. },
  100. components: {
  101. Header,
  102. Title,
  103. compForm
  104. }
  105. };
  106. </script>

父组件向子组件通信核心代码:const _this = this.refs.xxx

子组件向父组件通信核心代码:this.$parent.xxx

 

五、一些其它的坑

  1. 一些表单验证、label、必填选填等等的东西,el-form组件里有现成的。
  2. 可多选的表格回显的时候,要用Object类型判断!
  3. 表格右侧操作按钮,可以通过scope.row获取当前行的对象!详细看文档。
  4. el-input可以自定义模板,可以做成百度搜索输入栏那样的。
  5. menu组件要实现根据router跳转,要在menu属性添加default-active="$route.path",在menu-item的index属性输入router的path。
  6. 父子组件通信的时候尽量避免修改同一个props中的变量,会有警告,很长。
  7. table中el-table-column指定formatter属性可以格式化,这个可以处理时间、布尔值、数组等等
  8. table中添加<el-table-column type="selection" width="55"></el-table-column>可以实现多选功能
  9. 可以实现多选功能的table多选框回显的时候,回显函数要写到this.$nextTick(()=>{})里边
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/运维做开发/article/detail/795000
推荐阅读
相关标签
  

闽ICP备14008679号