基于 Vue 组件库 Element 搭建管理系统

Element 介绍

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

Element 提供了配套设计资源,帮助你的网站快速成型。

是由饿了么公司前端团队开源的。

  • 官网:https://element.eleme.cn/
  • GitHub:https://github.com/ElemeFE/element/

安装 Element

npm i element-ui -S

引入 Element

在 main.js 中写入以下内容:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

若报错:

image-20201102153341973

原因:缺少匹配规则

解决办法:在 webpack.config.js 文件中的 module 中增加如下 json

{
   test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
   loader: 'file-loader'
}

如下图所示:

image-20201102153601127

Element 警告处理

explicit keys

Element for 循环报如下异常:

component lists rendered with v-for should have explicit keys

处理方案:加上 :key="index"

v-for 列表渲染时,组件或元素中还要添加一个 :key="xxx",这里可以看一下 item 有没有唯一标识 id,如果有,可以设置为 :key="item.id"

如果没有唯一标识,可以考虑 v-for="(item, idx) in items",然后设置 :key="idx"

增删改查示例

<template>
    <div>
      <el-form size="mini" :inline="true" :model="queryMap" class="demo-form-inline">
        <el-form-item label="图书名">
          <el-input clearable @clear="search" v-model="queryMap.name" placeholder="图书名"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input clearable @clear="search" v-model="queryMap.author" placeholder="作者"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
          <el-button type="success" icon="el-icon-circle-plus-outline" @click="openAdd">添加</el-button>
        </el-form-item>
      </el-form>
        <el-table
                :data="tableData"
                border
                style="width: 70%">
            <el-table-column 
                    fixed
                    prop="id"
                    label="编号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="图书名"
                    >
            </el-table-column>
            <el-table-column
                    prop="author"
                    label="作者"
                    width="120">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="deleteBook(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="total"
                @current-change="page"
                >
        </el-pagination>

        <el-dialog
        title="添加物资去处"
        :visible.sync="addDialogVisible"
        width="30%"
        @close="closeAddDialog"
      >
        <span>
          <el-form
            :model="addRuleForm"
            :rules="addRules"
            ref="addRuleFormRef"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="图书名称" prop="name">
                <el-input v-model="addRuleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="作者" prop="author">
                <el-input v-model="addRuleForm.author"></el-input>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        methods: {
            deleteBook(row){
                const _this = this
                this.$axios.delete('book/deleteById/'+row.id).then(function(resp){
                    _this.$alert('《'+row.name+'》删除成功!', '消息', {
                        confirmButtonText: '确定',
                        callback: action => {
                            window.location.reload()
                        }
                    })
                })
            },
            edit(row) {
                this.$router.push({
                    path: '/update',
                    query:{
                        id:row.id
                    }
                })
            },
            page(currentPage){
                this.queryMap.pageNum = currentPage;
                this.getConsumerList();
            },
            //搜索
            search() {
              this.queryMap.pageNum = 1;
              this.getConsumerList();
            },
            async getConsumerList() {
              const _this = this
              this.$axios.get('book/findAll/'+(_this.queryMap.pageNum-1)+'/6', {
                  params: this.queryMap
                }).then(function(resp){
                  console.log(resp)
                  _this.tableData = resp.data.content
                  _this.pageSize = resp.data.size
                  _this.total = resp.data.totalElements
              })
            },
            openAdd() {
              this.addDialogVisible = true;
            },
            //关闭弹出框
            closeAddDialog() {
              this.$refs.addRuleFormRef.clearValidate();
              this.addRuleForm = {};
            },
            //添加
            add() {
              this.$refs.addRuleFormRef.validate(async valid => {
                if (!valid) {
                  console.log(this.addRuleForm);
                  return;
                } else {
                  const _this = this
                  this.$axios.post('book/save',this.addRuleForm).then(function(resp){
                      if(resp.data == 'success'){
                          _this.addDialogVisible = false;
                          _this.$message.success("添加成功");
                          _this.addRuleForm = {};
                          _this.getConsumerList();
                      } else {
                        return this.$message.error("添加失败:" + res.msg);
                      }
                  })                
                }
              });
            }
        },

        data() {
            return {
                addDialogVisible: false, //添加弹框是否显示
                queryMap: { pageNum: 1, pageSize: 10, name: "" }, //查询对象
                pageSize: 1,
                total: 11,
                tableData: [{
                    id: 1,
                    name: '',
                    author: ''
                }],
                addRuleForm: {
                    name: '',
                    author: ''
                },
                addRules: {
                    name: [
                        { required: true, message: '图书名称不能为空', trigger: 'blur' }
                    ],
                    author:[
                        { required: true, message: '作者不能为空', trigger: 'blur' }
                    ]
                }
            }
        },

        created() {
          this.getConsumerList();
        }
    }
</script>

效果如下:

image-20201104161014813