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

Posted 2020-12-07 web-shu

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

 1   <el-row style>
 2       <el-breadcrumb
 3         separator-class="el-icon-arrow-right"
 4         style="
 5           margin-left: 2%;
 6           vertical-align: middle;
 7           height: 30px;
 8           line-height: 30px;
 9         "
10       >
11         <el-breadcrumb-item :to="{ path: ‘/home‘ }">首页</el-breadcrumb-item>
12         <el-breadcrumb-item>{{ typeName1 }}</el-breadcrumb-item>
13         <el-breadcrumb-item>{{ typeName }}</el-breadcrumb-item>
14       </el-breadcrumb>
15     </el-row>
16  
17 data() {
18     return {
19       typeName1: "安规违章管理",
20       typeName: "安规条款",
21     };
22   },

 

 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-row>
 
 
 data() {
     return {

     RuleLevel:"",

   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;

  },

 

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>
      <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;
    },