表格框架页组件
适用于含有“查询条件”、“操作按钮”、“表格”、“分页”内容的页面开发,使此类页面尽量做到样式统一,以及减少不必要的重复搬砖。
- “查询条件” 部分:具体的查询条件字段需自行写在name为searchBar的slot中。
- “操作按钮”部分:分为“左侧”和“右侧”,左侧的按钮需自行写在name为tableTopOptionLeft的slot中,右侧的按钮需自行写在name为tableTopOptionRight的slot中。
- “表格”部分:只需传入表格字段对象,无需重写
<el-table>
标签。 - “分页”部分:只需传入导出函数,无需重写
<el-pagination>
标签。
表格框架页组件用法
// 引入表格框架页组件
import crudForm from "@/components/crudForm/index";
<crud-form ref="crudForm"
<!-- 表格列名 -->
:field-list="fieldList"
<!-- 导出方法作为属性传入组件 -->
:exportFn="exportFn"
<!-- 查询接口作为属性传入组件 -->
:api="cx"
<!-- 查询参数对象作为属性传入组件 -->
:queryParam="formInline" >
<!-- 查询条件区域 -->
<template slot="searchBar">
<searchFilter ref="searchFilter" :queryParam="formInline" />
</template>
<!-- 表格上的左侧按钮区域 -->
<template slot="tableTopOptionLeft">
<dialogAdd ref="dialogAdd" />
</template>
<!-- 表格上的右侧按钮区域 -->
<template slot="tableTopOptionRight">
<el-button size="small">批量导入</el-button>
</template>
<!-- 表格最后一列:操作列区域 -->
<template slot="tableOption" slot-scope="{ index, row }">
<el-button @click="modify(row)" type="text" size="small">修改</el-button>
<el-button @click="remove(row.id)" type="text" size="small">删除</el-button>
</template>
</crud-form>
exportdefault {
data() {
var formatterName = row => {
if (row.name == 1) {
return "国家";
} else if (row.siteId == 2) {
return"行业";
}
};
return {
formInline: {},
fieldList: [
{ name: "日期", value: "date", width: "105" },
{ name: "类型", value: "typeName" },
{ name: "名称", value: "name", formatter: formatterName }
]
};
},
components: { crudForm }
};
表格框架页组件参数
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
fieldList | 表格字段 | Array | —— | —— |
queryParam | 查询条件对象 | Object | —— | —— |
api | 查询接口函数 | Function | —— | —— |
exportFn | 分页中的导出函数 | Function | —— | —— |
showIndex | 是否显示表格中的“序号”列 | Boolean | true / false | true |
showTreeIndex | 是否显示树形表格中的“序号”列 | Boolean | true / false | false |
showCheckbox | 是否显示表格中的“复选框”列 | Boolean | true / false | true |
page | 是否带分页 | Boolean | true / false | true |
fixed | 列固定在左侧或右侧 | String | left / right | —— |
tableOptionName | 最后一列显示的列名 | String | —— | 操作 |
reverseShow | 针对表格特定数据经行反转操作 | Boolean | true / false | false |
levelDown | 针对表格数据是否存在二级项 | Boolean | true / false | false |
tableBorder | 针对表格对应列可以通过拖动改变宽度 | Boolean | true / false | false |
treeProps | 表格树形控件 | Object | —— | —— |
表格框架页组件事件
事件名称 | 说明 | 参数 |
---|
getDataInit | 查询第一页的表格数据(会自动带上查询条件) | —— |
getMultipleSelection | 获取表格中多行选中的数据 | —— |
fieldList参数
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
name | 列名 | String | —— | —— |
value | 接口返回的字段名 | String | —— | —— |
type | 列的显示类型 | String | link | —— |
clickFn | 列的点击事件,只在type="link"时有效 | Function(row) | —— | —— |
width | 列宽 | String | —— | —— |
formatter | 用来格式化内容 | Function(row, column, cellValue, index) | —— | —— |
showOverflowTooltip | 当内容过长被隐藏时显示 tooltip | Boolean | —— | false |
slotname | template插槽名 | string | —— | —— |
组件代码
/* * @name : 表格框架页组件 * @author : FuYaJuan * @参数 { fieldList : {Array}
表格字段 } 嵌套多级表头 * @参数 { queryParam : {Object} 查询条件对象 } * @参数 {
api : {Function} 查询接口函数 } * @参数 { exportFn : {Function()}
分页中的导出函数 } * @参数 { showIndex : {Boolean} 是否显示序号,默认显示 }*
@参数 { isinput : {Boolean} 是否显示序号,默认显示 } * @参数 { showColumnSetting
: {Boolean} 是否开启动态列设置,默认显示 } * @参数 { showExportBtn : {Boolean}
是否显示导出按钮,默认显示 } * @参数 { showCellClick : {Boolean}
是否开启动态列设置,默认关闭 } * @参数 { showCheckbox : {Boolean}
是否显示复选框, 默认显示 } * @参数 { page : {Boolean} 是否带分页, 默认带分页 }
* @参数 { fixed : {String} 列是否固定在左侧或者右侧,默认右侧 } * @参数 {
tableOptionWidth : {String} 最后一列的宽度 } * * @参数 {uniqueValue : {String}
需要展示input的单行唯一值 } * * @参数 {strategyIdName : {String}
需要展示input的单行唯一值的名字 } * * @参数 {showCheckboxSelect :
{Boolean}是否显示复选框禁止或者不显示 } * @参数 {radioBtn : {Boolean}
数据是否默认选中第一个-单选框 } * @参数 {showRadio : {Boolean}
表格是否显示单选框 } * @参数 {
sortBy:后端翻译的表格字段要在fieldList中加上未翻译之前的字段名,否则会影响后端排序,不需要排序功能的列加上noSort:true
用法示例{ name: "组织机构", value: "orgName" ,sortBy:"orgId", noSort:true}} *
@事件 { getDataInit : {Function()} 重新查询第一页的表格数据 } * @事件 {
handleCurrentChange : {Function()} 重新查询当前页的表格数据 } * @事件 {
getMultipleSelection : {Function()} 获取表格多行选中的数据 } * @事件 {
getTableData : {Function()} 获取完整的table表格数据-tableData } * @version 1.0 *
@edit: 2020/05/20 */
<template>
<div style="display: flex; flex-direction: column; flex: 1">
<div
class="s-o-t-wrap"
style="display: flex; flex-direction: column; flex: 1"
>
<!--查询条件 -->
<div
class="search-wrap"
v-if="searShow"
>
<slot name="searchBar" />
</div>
<!-- 操作 -->
<div
class="table-top-option-wrap"
v-if="btnShow"
>
<div class="left">
<slot name="tableTopOptionLeft" />
</div>
<div class="right">
<slot name="tableTopOptionRight" />
</div>
</div>
<!-- 表格 -->
<div
class="table-wrap"
id="table-wrap"
style="display: flex; flex-direction: column; flex: 1"
>
<!-- {{ titleName }} -->
<div
class="right_title"
v-if="titleShow"
style="
display: flex;
flex-direction: column;
flex: 1;
margin-bottom: 1px;
"
>
<div>
<slot name="leftTitle" />
</div>
<div>
<slot name="rightTitle" />
</div>
<div class="grid-content table-cont">
<div class="head-text"></div>
<!-- :tree-props="treeProps" -->
<el-table
ref="crudForm"
:border="tableBorder"
:data="tableData"
:header-cell-class-name="cellClass"
@selection-change="handleSelectionChange"
@current-change="handleSelectionChange2"
@sort-change="sortChange"
@cell-click="cellClick"
:row-class-name="tableRowClassName"
header-row-class-name="table-header"
:cell-class-name="cellcb"
:cell-style="columnStyle"
row-key="id"
:tree-props="treeProps"
:max-height="tableHeight"
:radiobtn="radioBtn"
stripe
@getTableData="getThisTableData"
>
<el-table-column
v-if="showIndex && showTreeIndex"
label=""
type="index"
width="60"
align="left"
>
<template slot-scope="scope">
{{ scope.row.idKey }}
</template>
</el-table-column>
<el-table-column
v-if="showIndex"
type="index"
:sortable="false"
width="70"
align="left"
:index="indexMethod"
/>
<el-table-column
width="50"
v-if="showRadio"
>
<template slot-scope="scope">
<el-radio
v-model="tableRadio"
:label="scope.row"
>{{
` `
}}</el-radio>
</template>
</el-table-column>
<el-table-column
v-if="showCheckbox"
type="selection"
width="50"
:selectable="selecCheckbox"
align="center"
/>
<!-- <el-table-column
v-if="showCheckboxSelect"
width="45"
align="center"
>
<template v-slot="scope">
<el-checkbox
v-model="scope.row.isChecke"
v-if="
scope.row[scope.row['canSelectName']] ==
scope.row.canSelectValue
"
@change="checkTypeBox(scope.row)"
></el-checkbox>
</template>
</el-table-column> -->
<el-table-column
v-for="(item, index) in fieldList.filter(
(item) => !item.hidden
)"
:key="index"
:label="item.name"
:align="item.clickable ? 'center' : 'left'"
:width="item.width"
show="true"
:v-if="item.show"
:sortable="false"
:sort-by="item.sortBy ? item.sortBy : item.value"
show-tooltip-when-overflow
:render-header="renderheader"
>
<template slot-scope="scope">
<el-button
class="cursor"
v-if="item.type === 'link'"
type="text"
size="small"
@click="item.clickFn(scope.row)"
>{{ scope.row[item.value] }}</el-button>
<el-button
v-else-if="item.type === 'linkvalue'"
type="text"
size="small"
@click="item.clickFn(scope.row)"
>
{{
item.formatter
? item.formatter(scope.row)
: scope.row[item.value]
}}
</el-button>
<el-input
v-else-if="item.type === 'input'"
v-model.trim="scope.row[item.value]"
clearable
placeholder="请输入"
:maxlength="10"
style="width: 90%"
>
</el-input>
<!-- 单行input -->
<el-input
v-else-if="
scope.row.isInputshow && item.type === 'aloneInput'
"
v-model.trim="scope.row[item.value]"
clearable
placeholder="请输入"
:maxlength="10"
style="width: 90%"
>
</el-input>
<!-- 键值渲染 -->
<template v-else>
<span :style="{
color: getStatusColor(item, scope.row[item.value]),
}">
{{
item.formatter
? item.formatter(scope.row)
: scope.row[item.value]
}}
</span>
</template>
</template>
</el-table-column>
<el-table-column
:width="Number(tableslotWidth)"
:label="item.name"
:v-if="item.slot"
align="left"
v-for="(item, index) in fieldList.filter((item) => item.slot)"
:key="index"
>
<template slot-scope="scope">
<slot
:name="item.slotname"
:row="scope.row"
/>
</template>
</el-table-column>
<el-table-column
:fixed="fixed"
:width="tableOptionWidth"
:label="tableOptionName"
align="left"
v-if="showColumnHandle"
>
<template slot-scope="scope">
<slot
name="tableOption"
:row="scope.row"
/>
</template>
</el-table-column>
<!-- 新增的 -->
<el-table-column
:fixed="fixed"
:width="tableOptionWidth"
:label="tableOptionName1"
align="left"
v-if="showColumnHandle1"
>
<template slot-scope="scope">
<slot
name="tableOption1"
:row="scope.row"
/>
</template>
</el-table-column>
<!-- 表头汇总 有序用电方案编制 -->
<slot name="gradeShowTable" />
</el-table>
</div>
</div>
</div>
</div>
<div
class="page-wrap-fixed"
v-if="page"
id="page-wrap-fixed"
>
<el-pagination
:current-page.sync="queryParam.current"
:total="listInfo.pageTotal"
:page-size.sync="queryParam.size"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
size="small"
layout="total,prev,slot,pager,next,jumper"
>
<el-select
style="width: 100px"
:popper-append-to-body="false"
v-model="Selectsize"
placeholder="前往"
size="mini"
@change="handleSizeChange"
>
<el-option
v-for="item in pageoptions"
:key="item.label"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-pagination>
</div>
</div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector";
import rightTitle from "./rightTitle.vue";
import { Loading } from "element-ui";
var options = {
text: "加载中......",
fullscreen: true,
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.3)",
};
export default {
name: "CrudForm",
props: {
isRowSelect: {
type: Object,
default: () => { },
},
//是否首屏进入获取table数据
initapi: {
type: Boolean,
default: true,
},
tableslotName: {
type: String,
default: "",
},
tableslotWidth: {
type: String,
default: "",
},
showtableslot: {
type: Boolean,
default: true,
},
// 表格字段配置
fieldList: {
type: Array,
default: [],
},
// 查询条件
queryParam: {
type: Object,
default: {},
},
// 获取数据的接口
api: {
type: Function,
default: () => { },
},
// 导出
exportFn: {
type: Function,
},
// 最后一列显示的列名
tableOptionName: {
type: String,
default: "操作",
},
// 最后一列显示的列名
tableOptionName1: {
type: String,
default: "操作",
},
// 是否带分页
page: {
type: Boolean,
default: true,
},
reverseShow: {
type: Boolean,
default: false,
},
//table表格层级数据下拉
levelDown: {
type: Boolean,
default: false,
},
//table表格表头是否支持拖拽
tableBorder: {
type: Boolean,
default: false,
},
// 表格是否显示序号
showIndex: {
type: Boolean,
default: true,
},
// 表格是否显示tree序号
showTreeIndex: {
type: Boolean,
default: false,
},
// 表格是否显示复选框
showCheckbox: {
type: Boolean,
default: true,
},
// 表格是否显示复选框禁止或者不显示
showCheckboxSelect: {
type: Boolean,
default: false,
},
// 表格复选框是否禁选
selecCheckbox: {
type: Function,
},
// 列是否固定在左侧或者右侧
fixed: {
type: String,
default: "right",
},
// 最后一列的宽度
tableOptionWidth: {
type: Number,
default: "",
},
// 是否开启动态列设置
showColumnSetting: {
type: Boolean,
default: true,
},
// 是否显示导出按钮
showExportBtn: {
type: Boolean,
default: true,
},
// 是否显示操作列
showColumnHandle: {
type: Boolean,
default: true,
},
// 是否显示操作列
showColumnHandle1: {
type: Boolean,
default: false,
},
columnNum: {
type: String,
default: "6",
},
searShow: {
type: Boolean,
default: true,
},
btnShow: {
type: Boolean,
default: true,
},
titleShow: {
type: Boolean,
default: true,
},
//不掉接口的data
preData: {
type: Array,
default: () => [],
},
//树性表格
treeProps: {
type: Object,
default: () => { },
},
rowKey: {
type: String,
default: "",
},
// dict show解决分页布局中问题
dictistrue: {
type: Boolean,
default: false,
},
getFntrue: {
type: Boolean,
default: false,
},
// 数据是否默认选中第一个-单选框
radioBtn: {
type: Boolean,
default: false,
},
// 表格是否显示单选框
showRadio: {
type: Boolean,
default: false,
},
// 默认子组件初始化接口
inittwo: {
type: Boolean,
default: true,
},
// 是否需要单行input
isinput: {
type: Boolean,
default: true,
},
// 展示input的数据唯一值
uniqueValue: {
type: String,
default: "",
},
//数据唯一值的名称
strategyIdName: {
type: String,
default: "",
},
//根据状态显示全选按钮
statusesArr: {
type: Array,
default: () => [],
},
},
components: { rightTitle },
data () {
return {
tableHeight: null,
titleName: "",
colOptions: [],
colSelect: [],
tableData: [],
// tableSelectList: [], //复选框是否展示相关
tableRadio: {}, //表格单选相关
exportData: {
headers: [],
values: [],
},
multipleSelection: [],
loading: false,
listInfo: {
pageTotal: 0, // 总条数
pageSizes: [20, 50, 100], // 分页数量列表
query: {
// 查询条件
current: 1, // 当前页
size: 20, // 每页条数
},
},
prj: {
projectNum: 0,
yearIncome: 0,
},
pageoptions: [
{ label: "20条/页", value: 20 },
{ label: "50条/页", value: 50 },
{ label: "100条/页", value: 100 },
],
Selectsize: 20,
};
},
created () {
this.titleName = this.$route.meta.title;
if (!this.getFntrue) {
this.initapi && this.api && this.getData(this.api);
}
},
beforeMount () { },
computed: {
isSatisfied () {
if (this.statusesArr.length == "0") {
return true;
} else {
return this.tableData.some((item) =>
this.statusesArr.includes(item.flowStatus)
);
}
},
},
mounted () {
this.watchSize();
window.onresize = () => {
return (() => {
this.$nextTick(() => {
this.watchSize();
});
})();
};
for (let i = 0; i < this.fieldList.length; i++) {
this.colSelect.push(this.fieldList[i].name);
if (this.showColumnSetting) {
if (this.colSelect.length > Number(this.columnNum)) {
continue;
}
}
this.colOptions.push(this.fieldList[i].name);
}
},
watch: {
preData (val) {
this.tableData = val;
},
colOptions (colArr) {
let self = this;
for (let i in self.fieldList) {
if (colArr.indexOf(self.fieldList[i].name) === -1) {
self.fieldList[i].show = false;
} else {
self.fieldList[i].show = true;
}
}
},
},
beforeUpdate () {
this.$nextTick(() => {
});
},
methods: {
cellClass (row) {
if (!this.isSatisfied) {
return "disableheadselection";
}
},
//根据状态隐藏复选框
cellcb (row) {
if (this.isRowSelect && Object.keys(this.isRowSelect).length > 0) {
if (this.isRowSelect.list.includes(row.row[this.isRowSelect.flow])) {
return "myCell";
}
}
},
getStatusColor (row, status) {
if (row.colorArr) {
const colorItem = row.colorArr.find(
(item) => Object.keys(item)[0] == status
);
if (colorItem) {
return Object.values(colorItem)[0];
}
return "#fff";
}
},
getThisTableData () {
this.$emit("getTableData", this.tableData);
},
// 判断复选框是否展示true 显示 反之 ------仅支持根据一个条件进行判断
statusFlage (fieldList) {
return fieldList.filter((item) => item.statusName)[0].statusName;
},
formatter (index) { },
watchSize () {
this.$nextTick(() => {
if (this.page) {
let pageWidth = document.getElementById("page-wrap-fixed");
let tabHead = document.getElementsByClassName("content_right");
let ontherHead = document.getElementsByClassName("dictManager_list");
let erd = elementResizeDetectorMaker();
if (this.dictistrue) {
erd.listenTo(ontherHead, function (element) {
pageWidth.style.width = element.offsetWidth + "px";
});
} else {
erd.listenTo(tabHead, function (element) {
pageWidth.style.width = element.offsetWidth + "px";
});
}
if (document.getElementsByClassName("header-form").length) {
this.tableHeight =
window.innerHeight -
document.getElementsByClassName("header-form")[0].clientHeight -
document.getElementsByClassName("table-top-option-wrap")[0]
.clientHeight -
217 -
100;
console.log(this.tableHeight);
}
} else {
if (document.getElementsByClassName("header-form").length) {
this.tableHeight =
window.innerHeight -
document.getElementsByClassName("header-form")[0].clientHeight -
document.getElementsByClassName("table-top-option-wrap")[0]
.clientHeight -
247;
console.log(this.tableHeight);
}
}
});
},
indexMethod (index) {
let idx = index >= 9 ? index + 1 : "0" + (index + 1);
return idx;
},
tableRowClassName ({ row, rowIndex }) {
if (rowIndex % 2 == 1) {
return "warning-row";
} else {
return "success-row";
}
return "";
},
// 分页-刷新
refresh () {
this.getData(this.api);
},
// 导出
exportTable () {
if (!this.tableData.length) {
this.$message({
showClose: true,
message: "列表数据为空,无法导出!",
type: "warning",
});
return;
}
this.exportData.headers = [];
this.exportData.values = [];
for (let i = 0; i < this.fieldList.length; i++) {
if (this.fieldList[i].show == true) {
this.exportData.headers.push(this.fieldList[i].name);
this.exportData.values.push(this.fieldList[i].value);
}
}
this.exportFn ? this.exportFn() : null;
},
// // 复选框选中
// checkTypeBox (val) {
// this.multipleSelection = this.tableData.filter((item) => item.isChecke);
// },
// 表格多行选中
handleSelectionChange (val) {
this.multipleSelection = val;
},
// 获取表格多行选择的数据
getMultipleSelection () {
this.$emit("getMultipleSelection", this.multipleSelection);
return this.multipleSelection;
},
// 表格单行选中
handleSelectionChange2 (row) {
this.tableRadio = row;
this.$emit("getradioSelection", this.tableRadio);
},
// 获取表格单行选择的数据
getradioSelection () {
return this.tableRadio;
},
// 调用接口 获取数据
getData (api) {
if (this.preData.length > 0) {
this.tableData = this.preData;
return;
}
this.loading = Loading.service(options);
return new Promise((resolve, reject) => {
api(this.handleParams())
.then((res) => {
this.loading && this.loading.close();
if (
res.code === "000000" ||
res.code == "10000" ||
res.code == 200
) {
if (this.treeProps) {
this.tableData = this.handleTree(
res.data,
"orgYear",
"parentOrgYear"
);
if (this.showTreeIndex) {
this.reTableData(this.tableData);
}
} else {
const d = res.data;
if (d.records) {
this.tableData = d.records;
} else {
this.tableData = d;
}
if (d.list) {
this.tableData = d.list;
}
if (this.reverseShow) {
d.records.forEach((item) => {
item.consNumLoadList.reverse();
});
this.tableData = d.records;
}
if (this.levelDown) {
this.tableData = this.handleTree(
res.data,
"orgYear",
"parentOrgYear"
);
}
this.listInfo.pageTotal = parseInt(d.total);
this.queryParam.size = d.pageSize || d.size;
this.queryParam.current = d.pageNum || d.current;
this.prj = {
projectNum: 0,
yearIncome: 0,
};
if (this.$route.meta.title == "项目收入统计") {
this.prj.projectNum += d.projectNum;
this.prj.yearIncome += d.yearIncome;
}
}
this.getThisTableData();
if (this.isinput) {
// 把所有数据都加上参数isInputshow并且值为false
this.tableData.forEach((element) => {
element["isInputshow"] = false;
});
this.tableData = this.tableData;
// 通过唯一值判断点击行是哪条数据,并且isInputshow 变为true
for (let i = 0; i < this.tableData.length; i++) {
if (
this.tableData[i][this.strategyIdName] == this.uniqueValue
) {
this.tableData[i].isInputshow = true;
}
}
this.tableData = this.tableData;
}
} else {
this.$message.error(res.data);
}
})
.catch((err) => {
this.loading && this.loading.close();
// this.$message.error("数据加载失败!");
});
});
},
reTableData (data) {
data.forEach((v, index) => {
v.idKey = index + 1 > 9 ? index + 1 : "0" + Number(index + 1);
if (v.childeLaunchIndex && v.childeLaunchIndex.length > 0) {
this.reTableData(v.childeLaunchIndex);
}
});
return data;
},
//数据处理 chilrden
handleTree (data, id, parentId, children, rootId) {
id = id || "id";
parentId = parentId || "parentId";
children = children || "children" || "childeLaunchIndex";
rootId =
rootId ||
Math.min.apply(
Math,
data.map((item) => {
return item[parentId];
})
) ||
0;
//对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data));
cloneData.forEach((item) => {
item.isSelect = false; //添加全选半选状态
});
//循环所有项
const treeData = cloneData.filter((father) => {
let branchArr = cloneData.filter((child) => {
//返回每一项的子级数组
return father[id] == child[parentId]; //筛选子一级的数组
});
branchArr.length > 0 ? (father.children = branchArr) : "";
//返回第一层
return father[parentId] == rootId;
});
// console.log(treeData)
return treeData != "" ? treeData : data;
},
// 重新查询第一页的表格数据
getDataInit () {
this.queryParam.current = 1;
this.getData(this.api);
this.$emit("getDataInit");
},
// 处理接口调用所需的参数
handleParams () {
const obj = {};
for (const key in this.queryParam) {
obj[key] = this.queryParam[key];
}
return { ...this.listInfo.query, ...obj };
},
// pageSize 改变时会触发
handleSizeChange (val) {
const query = this.queryParam;
query.size = val; // 每页条数
query.current = 1; // 每页条数切换,重置当前页
this.getData(this.api);
},
// currentPage 改变时会触发
handleCurrentChange (val) {
this.queryParam.current = val; // 当前页
this.getData(this.api);
},
// 列排序
sortChange (column) {
if (column.order === "ascending") {
this.queryParam.order = "asc";
} else {
this.queryParam.order = "desc";
}
this.getData(this.api);
},
// 设置点击列样式
columnStyle (row, column, rowIndex, columnIndex) {
if (row.column.align == "is-center") {
return "color: #23a4a4; cursor: pointer;";
} else {
return "";
}
},
// 表格点击事件
cellClick (row, column, cell, event) {
this.$emit("cell-click", row, column, cell, event);
},
//表头换行
renderheader (h, { column, $index }) {
return h("div", { style: { padding: '0' } }, [
h("div", { style: { display: 'block', lineHeight: '16px', padding: '0' } }, column.label.split(",")[0]),
h("div", { style: { display: 'block', lineHeight: '18px', textAlign: 'center', padding: '0' } }, column.label.split(",")[1]),
]);
},
},
};
</script>
<style>
.el-loading-mask {
min-width: 100%;
height: 98%;
}
</style>
<style lang="scss" scoped>
@import "@/styles/elementInitStyles/element-variables.scss";
.search-wrap {
// @include background_color("el-form-bg");
}
/deep/ .el-table tr {
height: 40px;
}
.s-o-t-wrap {
// margin-bottom: 45px;
}
.search-wrap {
// padding: 18px 12px 8px;
/deep/ button {
// width: 90px;
// height: 30px;
// border-radius: 3px;
}
/deep/ .search-box {
padding: 20px;
}
}
.right_title {
// @include background_color("table-top-title");
@include font_color("table-top-title-color");
width: 100%;
// height: 40px;
// line-height: 40px;
font-size: 16px;
// padding: 0 30px;
/* background-color: #374492; */
// @include background_color("table-top-title");
@include font_color("table-top-title-color");
color: #fff;
display: flex;
justify-content: space-between;
margin-top: 10px;
margin-bottom: -10px;
font-size: 14px;
// min-height: 400px;
}
.search-wrap /deep/ .el-form--inline .el-form-item {
// margin-bottom: 10px;
margin-right: 20px;
.el-form-item__label {
display: inline-block;
// width: 70px;
text-align: right;
padding-right: 10px;
line-height: 30px;
}
.el-form-item__content {
line-height: 30px;
}
.el-input {
width: 180px;
}
button {
margin-top: 0;
}
}
.table-top-option-wrap {
margin: 20px 20px 4px;
overflow: hidden;
.left {
float: left;
/deep/ .el-button--primary {
// width: 148px;
// height: 32px;
border-radius: 2px;
}
}
.right {
float: right;
/deep/ .el-button {
width: 150px;
height: 32px;
border-radius: 2px;
}
}
}
.table-wrap {
.el-table th {
padding: 2px 0;
}
}
.table-wrap /deep/ .table-header {
// background-color: #f1f1f1;
color: #ffffff;
font-weight: bold;
th {
// background-color: #2a377b;
}
}
.table-wrap /deep/ .table-body-td {
padding: 3px 0;
}
//头部标题
.grid-content {
flex: 1;
border-radius: 0 !important;
// border-radius: 8px;
// height: 100%;
// margin: 15px 15px 0 0;
margin: 15px 20px 0 20px;
padding: 20px 20px;
// @include background_color("content-box-bg");
@include btbacnimg("titgroundimg"); //md样式
position: relative; //md样式
background-size: 100% 100%;
background-repeat: no-repeat;
overflow: hidden;
.head-text {
display: flex;
justify-content: space-between;
font-size: 14px !important;
font-weight: normal;
// border-top-right-radius: 8px;
// border-top-left-radius: 8px;
// @include border_color4("content-box-border");//下边框加粗
@include background_color("table-top-title");
.header-title {
font-size: 14px !important;
font-weight: normal;
padding: 0 20px;
min-height: 46px;
flex: 7;
display: flex;
align-items: center;
width: 100%;
@include background_color("table-top-title");
@include font_color("table-top-title-color");
box-sizing: border-box;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
.head-icon {
height: 16px;
width: 4px;
border-radius: 4px;
background-color: #00ccff;
margin-right: 14px;
}
}
}
//md样式
.head-text::before {
content: "";
width: 60px;
height: 80px;
@include btbacnimg("tit3groundimg");
background-size: 100% 100%;
position: absolute;
bottom: 0;
right: 1px;
}
/deep/.el-table tr th:first-child > .cell {
padding-left: 0px !important;
}
}
//md样式
.grid-content::before {
content: "";
width: 50%;
height: 30px;
@include btbacnimg("tit1groundimg");
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
top: -14px;
right: 0;
}
//md样式
.grid-content::after {
content: "";
width: 60px;
height: 80px;
@include btbacnimg("tit2groundimg");
background-size: 100% 100%;
position: absolute;
top: 0;
left: 1px;
}
/deep/.el-form-item--medium {
margin-top: 2px;
padding-right: 25px;
}
.cursor {
text-decoration: underline;
cursor: pointer;
color: rgb(0, 186, 198) !important;
}
/deep/.el-pagination {
display: flex !important;
align-items: center !important;
}
/deep/ .el-table--border,
.el-table--group {
border: 0px solid #ccc !important;
}
/deep/.myCell .el-checkbox__input {
display: none;
}
/deep/ .disableheadselection > .cell .el-checkbox__inner {
display: none;
}
</style>