vue+element+echarts常用组件1、(面包屑、操作区、表格)，方便快速搭建页面

  1、面包屑，页面上方使用

  <el-row style>
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        style="
          margin-left: 2%;
          vertical-align: middle;
          height: 30px;
          line-height: 30px;
        "
      >
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ typeName1 }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ typeName }}</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
 
data() {
    return {
      typeName1: "安规违章管理",
      typeName: "安规条款",
    };
  },

 

 2、操作区，包含（新建、修改、删除、关键字查询，导入、导出、下拉框刷选、开始日期、结束日期、优化用户体验，每个操作都触发搜索函数刷新页面）

   <el-row
      :gutter="14"
      style="margin-left: calc(2% - 12px); margin-top: 10px;"
    >
      <el-col :span="3" style="margin-left:5px">
        <el-select
          v-model="RuleLevel"
          clearable
          placeholder="条例级数"
          @change="selectUser"
        >
          <el-option
            v-for="(item, index) in list1"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <!-- <el-col :span="3">
           <el-select v-model="ruleNum" placeholder>
                <el-option v-for="(item,index) in list2" :label="item.name" :value="item.value"></el-option>
              </el-select>
      </el-col>-->
      <el-col :span="6">
        <el-input
          placeholder="关键字"
          v-model="ruleValue"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" icon="el-icon-search" @click="selectUser"
          >查询</el-button
        >
      </el-col>
      <el-col :span="2">
        <el-button
          type="success"
          icon="el-icon-plus"
          @click="newAg()"
          >新建</el-button
        >
      </el-col>

  <el-col :span="2">

          <el-date-picker

            v-model="startTime"

            type="datetime"

            format="yyyy-MM-dd HH:mm:ss"

            value-format="yyyy-MM-dd HH:mm:ss"

            placeholder="开工时间"

          ></el-date-picker>

      </el-col>

 

  <el-col :span="2">

          <el-date-picker

            v-model="endTime"

            type="datetime"

            format="yyyy-MM-dd HH:mm:ss"

            value-format="yyyy-MM-dd HH:mm:ss"

            placeholder="结束时间"

          ></el-date-picker>

      </el-col>

 

 

       //导入excel

         <el-col :span="2">

            <el-upload

              class="upload-demo"

              :action="upUrl+'?UnitId='+UnitId"

              accept=".xls, .xlsx"

              :show-file-list="false"

              :on-success="upSuccess"

              ref="my-uploadBd"

              :on-error="upError"

              :limit="1"

              :on-progress="progress"

            >

              <el-button type="warning" icon="el-icon-download" :disabled="ids == ''">导入</el-button>

            </el-upload>

          </el-col>

          <el-col :span="2">

            <el-button type="primary" icon="el-icon-upload2" @click="exportExcelEmpty">模板</el-button>

          </el-col>

    </el-row>
 
 
 data() {
     return {

 upUrl: appServer() + "worker/saveExport", //导入

 loadingTest: "",

     RuleLevel:"",

     startTime:"",

     endTime:"",

   list1: [
        { label: "全部", value: "" },
        { label: "一级", value: "1" },
        { label: "二级", value: "2" },
        { label: "三级", value: "3" },
        { label: "四级", value: "4" }
      ],
ruleValue:""
    };
   },

  created() {

    document.onkeydown = e => {

      if (window.event === undefined) {

        var key = e.keyCode;

      } else {

        // eslint-disable-next-line no-redeclare

        var key = window.event.keyCode;

      }

      if (key === 13) {

        this.selectUser();

      }

    };

  },

 destroyed() {

    document.onkeydown = undefined;

  },

 

//导入成功

  upSuccess(res) {

      if (res.code == 510) {

        this.$message({

          type: "error",

          message: res.msg

        });

        this.$router.push("/login");

        this.loadingTest.close();

      } else {

        this.loadingTest.close();

        if (res.message == 'failed') {

          this.$message({

            type: "error",

            message: "上传失败"

          });

        } else {

          this.$message({

            type: "success",

            message: "上传成功"

          });

        }

        this.$refs["my-uploadBd"].clearFiles();

        this.selectDept();

        this.selectUser();

      }

    },

//导入失败

    upError() {

      this.loadingTest.close();

      this.$message({

        type: "error",

        message: "上传失败!"

      });

    },

//导入加载动画

    // 导入

    progress() {

      this.loadingTest = this.$loading({

        lock: true,

        text: "Loading",

        spinner: "el-icon-loading",

        background: "rgba(0, 0, 0, 0.7)"

      });

    },

  // 导出模板，方便用户编写

    exportExcelEmpty() {

      let that = this;

      that

        .$confirm("此操作将导出excel空模版, 是否继续?", "提示", {

          confirmButtonText: "确定",

          cancelButtonText: "取消",

          type: "warning"

        })

        .then(() => {

          window.open(appServer() + "worker/exportExcel");

        })

        .catch(() => {

          that.$message({

            type: "info",

            message: "已取消导出"

          });

        });

    },

 

3、表格，可勾选多个 

   <!--表格-->
    <el-table
      v-loading="loading"
      ref="multipleTable"
      :data="menuData"
      border
      stripe
      style="margin-top: 20px; width: 96%; margin-left: 2%;"
      height="75%"
      @row-click="rowClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="index"
        label="序号"
        width="60"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="ruleNum"
        label="条款编号"
        align="center"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="ruleValue"
        label="条款内容"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="ruleLevelStr"
        label="条款级数"
        width="120"
        align="center"
      ></el-table-column>
//字数太多，超过18个字符，鼠标悬浮展示，这里用于备注就特别好

  <el-table-column prop="remark" label="备注" width="120" align="center">

            <template slot-scope="scope">

              <el-popover

                placement="top-start"

                width="300"

                trigger="hover"

                v-if="scope.row.remark !=null && scope.row.remark.length > 18"

                :content="scope.row.remark"

              >

                <p

                  slot="reference"

                  style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"

                >{{scope.row.remark}}</p>

              </el-popover>

              <span v-else>{{scope.row.remark}}</span>

            </template>

          </el-table-column>

      <el-table-column width="100" align="center" label="操作" fixed="right">
        <template slot-scope="scope">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-tooltip content="编辑" placement="top" effect="light" :visible-arrow="false">
                <i
                  @click="edit_judge_user1(scope.row)"
                  class="el-icon-edit"
                  style="color:#ffc125; vertical-align: middle;cursor: pointer;padding:10px;font-size:18px"
                ></i>
              </el-tooltip>
            </el-col>
            <el-col :span="12">
              <el-tooltip content="删除" placement="top" effect="light" :visible-arrow="false">
                <i
                  @click="cancel_user1(scope.row)"
                  class="el-icon-delete"
                  style="color:#f40; vertical-align: middle;cursor: pointer;padding:10px;font-size:18px"
                ></i>
              </el-tooltip>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="queryForm.total > 10"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryForm.pageNum"
      :page-sizes="[10, 20, 30, 40, queryForm.total]"
      :page-size="queryForm.pageSize"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryForm.total"
      style="margin-bottom: 20px; margin-top: 20px;"
    ></el-pagination>
 
 data() {
     return {
            loading: false,
            menuData: [],
 /*表格选中数据*/
         tableSelect: [],
        queryForm: {
        /*表格页size*/
        pageSize: 20,
        /*表格当前页*/
        pageNum: 1,
        /*表格记录总数*/
        total: 0
      },
   };
   },
//获取表格数据
  selectUser() {
      let that = this;
      that.loading = true;
      let params = {};

      params.RuleLevel = that.RuleLevel;
      params.ruleValue = that.ruleValue;
      params.ruleNum = that.ruleValue;

      params.pageNum = that.queryForm.pageNum;
      params.pageSize = that.queryForm.pageSize;

      (that.urls = "rule/findByPage"),
        commonGet(that.urls, params, function(res) {
          that.menuData = res.data.records;

          that.queryForm.total = res.data.total;
          that.loading = false;
        });
    },

    /*分页每页页数改变*/
    handleSizeChange(val) {
      let that = this;
      that.loading = true;
      that.queryForm.pageSize = val;
      that.selectUser();
    },
    /*分页当前页数改变*/
    handleCurrentChange(val) {
      let that = this;
      that.loading = true;
      that.queryForm.pageNum = val;
      that.selectUser();
    },
    /*表格单击选中*/
    rowClick(row, column, event) {
      let refsElTable = this.$refs.multipleTable; // 获取表格对象
      refsElTable.toggleRowSelection(row); // 调用选中行方法
    },
    /*表格选中赋值*/
    handleSelectionChange(val) {
      this.tableSelect = val;
    },