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 },
<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 {
list1: [ { label: "全部", value: "" }, { label: "一级", value: "1" }, { label: "二级", value: "2" }, { label: "三级", value: "3" }, { label: "四级", value: "4" } ], ruleValue:"" }; },
<!--表格-->
<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+element+echarts常用组件1、(面包屑、操作区、表格)，方便快速搭建页面
原文：https://www.cnblogs.com/web-shu/p/13041508.html