vue+element+echarts常用组件1、(面包屑、操作区、表格)，方便快速搭建页面
作者：互联网
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;
},
标签：vue,val,表格,面包屑,queryForm,loading,params,element,total 来源： https://www.cnblogs.com/web-shu/p/13041508.html