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

   <!--表格-->
    <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>
      <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;
    },