Skip to content

M
mes-ui
Commit b0f92a69 authored by 骆瑛's avatar 骆瑛
Browse files
Options

修改表格数据

parent 10cb42cc
Show whitespace changes
Inline Side-by-side
Showing with 142 additions and 216 deletions
assets/css/custom.less
View file @ b0f92a69
//定义变量 //定义变量
// @import './themes/deepBlank.less'; // @import './themes/deepBlank.less';
// @import './themes/green.less'; @import './themes/green.less';
@import './themes/default.less'; // @import './themes/default.less';
assets/css/iview-reset.less
View file @ b0f92a69
...@@ -538,13 +538,16 @@ ...@@ -538,13 +538,16 @@
.ivu-page-prev, .ivu-page-prev,
.ivu-page-next { .ivu-page-next {
background: @page-bg !important; background: @page-bg !important;
border:1px solid @page-bg_bd !important;
} }
.ivu-page-item { .ivu-page-item {
background: @page-bg !important; background: @page-bg !important;
border:1px solid @page-bg_bd !important;
} }
.ivu-page.mini .ivu-page-options-elevator input { .ivu-page.mini .ivu-page-options-elevator input ,.page_index .ivu-page-options-elevator input {
background: @page-bg; background: @page-bg;
border: 1px solid @page-bg; border: 1px solid @page-bg;
color: @page-color; color: @page-color;
......
assets/css/themes/deepBlank.less
View file @ b0f92a69
...@@ -99,6 +99,8 @@ ...@@ -99,6 +99,8 @@
@table_checkbox_bg: #106FFE; @table_checkbox_bg: #106FFE;
@table_checkbox_bd:#FFFFFF; @table_checkbox_bd:#FFFFFF;
@table_checkbox_bd_header:#FFFFFF; @table_checkbox_bd_header:#FFFFFF;
@table_line_shadow:none;
@table-tr-bd:transparent;
//高级搜索文字 //高级搜索文字
@search_text_span:#ffffff; @search_text_span:#ffffff;
//分页 //分页
...@@ -106,7 +108,7 @@ ...@@ -106,7 +108,7 @@
@page-active-color-hover: #fff; @page-active-color-hover: #fff;
@page-bg: #222341; @page-bg: #222341;
@page-color:#fff; @page-color:#fff;
@page-bg_bd:#222341;
//表格 //表格
@table_highbd:transparent; @table_highbd:transparent;
......
assets/css/themes/default.less
View file @ b0f92a69
...@@ -100,7 +100,9 @@ ...@@ -100,7 +100,9 @@
@search_icon_bg:#2d8cf0; @search_icon_bg:#2d8cf0;
@table_checkbox_bg:#2d8cf0; @table_checkbox_bg:#2d8cf0;
@table_checkbox_bd:#e8eaec; @table_checkbox_bd:#e8eaec;
@table_checkbox_bd_header:#e8eaec; @table_checkbox_bd_header:#dcdee2;
@table_line_shadow:none;
@table-tr-bd:#e8eaec;
//高级搜索文字 //高级搜索文字
@search_text_span:#515a6e; @search_text_span:#515a6e;
//分页 //分页
...@@ -108,7 +110,7 @@ ...@@ -108,7 +110,7 @@
@page-active-color-hover: #515A6E; @page-active-color-hover: #515A6E;
@page-bg: #fff; @page-bg: #fff;
@page-color: #515A6E; @page-color: #515A6E;
@page-bg_bd:#ffffff;
//表格 //表格
@table_highbd:#dcdee2; @table_highbd:#dcdee2;
@table-header-bg: #F5F6FA; @table-header-bg: #F5F6FA;
......
assets/css/themes/green.less
View file @ b0f92a69
...@@ -100,6 +100,8 @@ ...@@ -100,6 +100,8 @@
@table_checkbox_bd:#182C51; @table_checkbox_bd:#182C51;
@table_checkbox_bd_header:#FFFFFF; @table_checkbox_bd_header:#FFFFFF;
@table-color:#182C51; @table-color:#182C51;
@table_line_shadow:0px 0px 20px rgba(0, 0, 0, 0.16);
@table-tr-bd:transparent;
//高级搜索文字 //高级搜索文字
@search_text_span: #253D6D;; @search_text_span: #253D6D;;
...@@ -108,7 +110,7 @@ ...@@ -108,7 +110,7 @@
@page-active-color-hover: #515A6E; @page-active-color-hover: #515A6E;
@page-bg: #fff; @page-bg: #fff;
@page-color: #515A6E; @page-color: #515A6E;
@page-bg_bd:#CCCCCC;
//表格 //表格
@table_highbd:transparent; @table_highbd:transparent;
@table-header-bg: #253D6D; @table-header-bg: #253D6D;
...@@ -134,7 +136,7 @@ ...@@ -134,7 +136,7 @@
@part_top_title:#ffffff; @part_top_title:#ffffff;
@part_top_border:1px solid #ffffff; @part_top_border:1px solid #ffffff;
@table_border-bg:transparent; @table_border-bg:transparent;
@table_line: #CACBD0; @table_line: #ffffff;
@table-bottom_line:transparent; @table-bottom_line:transparent;
@table-bottom-border:#ffffff; @table-bottom-border:#ffffff;
......
pages/theme/index.vue
View file @ b0f92a69
...@@ -44,9 +44,8 @@ ...@@ -44,9 +44,8 @@
<Row> <Row>
<Col span="24" class="table_style"> <Col span="24" class="table_style">
<Table <Table
border :border="false"
stripe stripe
highlight-row
:columns="columns1" :columns="columns1"
:data="data1" :data="data1"
context-menu context-menu
...@@ -63,6 +62,17 @@ ...@@ -63,6 +62,17 @@
</template> </template>
</Col> </Col>
</Row> </Row>
<Row>
<Col
span="24"
type="flex"
justify="center"
align="end"
class="page_index"
>
<Page :total="100" show-elevator />
</Col>
</Row>
</div> </div>
</template> </template>
<script> <script>
...@@ -82,12 +92,14 @@ export default { ...@@ -82,12 +92,14 @@ export default {
{ {
align: "center", align: "center",
title: "订单编号", title: "订单编号",
minWidth: 140,
key: "name", key: "name",
}, },
{ {
align: "center", align: "center",
title: "任务类型", title: "任务类型",
key: "Review", key: "Review",
minWidth: 100,
render: (h, params) => { render: (h, params) => {
if (params.row.Review === "正式计划") { if (params.row.Review === "正式计划") {
return h( return h(
...@@ -115,11 +127,13 @@ export default { ...@@ -115,11 +127,13 @@ export default {
{ {
align: "center", align: "center",
title: "数量", title: "数量",
minWidth: 100,
key: "address", key: "address",
}, },
{ {
align: "center", align: "center",
title: "订单状态", title: "订单状态",
minWidth: 100,
key: "isload", key: "isload",
render: (h, params) => { render: (h, params) => {
if (params.row.isload === "已派发") { if (params.row.isload === "已派发") {
...@@ -137,7 +151,7 @@ export default { ...@@ -137,7 +151,7 @@ export default {
"span", "span",
{ {
style: { style: {
color: "#515a6e", color: "#ffffff",
}, },
}, },
params.row.isload params.row.isload
...@@ -148,41 +162,49 @@ export default { ...@@ -148,41 +162,49 @@ export default {
{ {
align: "center", align: "center",
title: "产品名称", title: "产品名称",
key: "address", key: "a",
minWidth: 120,
}, },
{ {
align: "center", align: "center",
title: "图号", title: "图号",
key: "address", key: "b",
minWidth: 110,
}, },
{ {
align: "center", align: "center",
title: "批次号", title: "批次号",
key: "address", minWidth: 90,
key: "c",
}, },
{ {
align: "center", align: "center",
title: "项目号", title: "项目号",
key: "address", minWidth: 120,
key: "d",
}, },
{ {
align: "center", align: "center",
title: "紧急程度", title: "紧急程度",
key: "address", minWidth: 100,
key: "e",
}, },
{ {
align: "center", align: "center",
title: "创建人", title: "创建人",
key: "address", minWidth: 100,
key: "f",
}, },
{ {
align: "center", align: "center",
title: "创建事件", title: "创建事件",
key: "address", key: "date",
minWidth: 170,
}, },
{ {
title: "操作", title: "操作",
key: "action", key: "action",
minWidth: 100,
align: "center", align: "center",
render: (h, params) => { render: (h, params) => {
return h("div", [ return h("div", [
...@@ -208,36 +230,60 @@ export default { ...@@ -208,36 +230,60 @@ export default {
], ],
data1: [ data1: [
{ {
name: "John Brown", name: "DDBH-80003-01",
age: 18,
address: "New York No. 1 ",
date: "2016-10-03",
Review: "正式计划", Review: "正式计划",
isload: "已派发", address: "1",
isload: "待派发",
a: "进气机匣组件",
age: 1,
date: "2020-07-15 22:22:45",
b: "TY-99-6788",
c: "32456",
d: "21545641362",
e: "一级",
f: "管理员",
}, },
{ {
name: "Jim Green", name: "DDBH-80003-01",
age: 24, Review: "正式计划",
address: "London No. 1 ", address: "1",
date: "2016-10-01", isload: "已派发",
Review: "临时计划", a: "进气机匣组件",
isload: "待派发", age: 1,
date: "2020-07-15 22:22:45",
b: "TY-99-6788",
c: "32456",
d: "21545641362",
e: "一级",
f: "管理员",
}, },
{ {
name: "Joe Black", name: "DDBH-80003-01",
age: 30,
address: "Sydney No. 1 ",
date: "2016-10-02",
Review: "临时计划", Review: "临时计划",
isload: "已派发", address: "1",
isload: "待派发",
a: "进气机匣组件",
age: 1,
date: "2020-07-15 22:22:45",
b: "TY-99-6788",
c: "32456",
d: "21545641362",
e: "一级",
f: "管理员",
}, },
{ {
name: "Jon Snow", name: "DDBH-80003-01",
age: 26,
address: "Ottawa No. 2 ",
date: "2016-10-04",
Review: "临时计划", Review: "临时计划",
address: "1",
isload: "已派发", isload: "已派发",
a: "进气机匣组件",
age: 1,
date: "2020-07-15 22:22:45",
b: "TY-99-6788",
c: "32456",
d: "21545641362",
e: "一级",
f: "管理员",
}, },
], ],
contextLine: 0, contextLine: 0,
...@@ -273,8 +319,7 @@ export default { ...@@ -273,8 +319,7 @@ export default {
border-radius: 4px 0px 0px 4px; border-radius: 4px 0px 0px 4px;
border: 1px solid @padding_input_border; border: 1px solid @padding_input_border;
} }
//修改的搜索框样式 .search_icon { //修改的搜索框样式
.search_icon {
width: 36px; width: 36px;
height: 34px; height: 34px;
background: @search_icon_bg; background: @search_icon_bg;
...@@ -311,13 +356,8 @@ export default { ...@@ -311,13 +356,8 @@ export default {
.ivu-icon { .ivu-icon {
color: @search_text_span !important; color: @search_text_span !important;
} }
.zhanshi {
font-size: 22px;
}
.ivu-select-dropdown { .ivu-select-dropdown {
background-color: #222341 !important; background-color: #222341 !important;
.ivu-dropdown-item { .ivu-dropdown-item {
color: #ffffff !important; color: #ffffff !important;
text-align: center; text-align: center;
...@@ -331,11 +371,9 @@ export default { ...@@ -331,11 +371,9 @@ export default {
} }
} }
} }
.set_btn { .set_btn > .ivu-icon {
.ivu-icon {
font-size: 20px !important; font-size: 20px !important;
} }
}
} }
.end_col { .end_col {
display: flex; display: flex;
...@@ -354,88 +392,52 @@ export default { ...@@ -354,88 +392,52 @@ export default {
color: @table-color !important; color: @table-color !important;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
.ivu-table-header { th,td {
border: 1px solid @table-header-bg;
// border-bottom: 1px solid @table-header-bg;
box-sizing: border-box;
thead {
tr {
th {
color: @table-header-color !important;
border: @table-body-bd;
height: 60px;
font-weight: 400;
background: @table-header-bg !important;
border-right: 1px solid @header_bd_right;
//表格内checkbox //表格内checkbox
.ivu-checkbox-inner { .ivu-checkbox-inner {
background: @checkbox-inner; background: @checkbox-inner;
border-radius: 1px; border-radius: 1px;
border: 1px solid @table_checkbox_bd_header; border: 1px solid @table_checkbox_bd;
} }
//选中状态 //选中状态
.ivu-checkbox-checked { .ivu-checkbox-checked .ivu-checkbox-inner {
.ivu-checkbox-inner {
border: @table_check_bd; border: @table_check_bd;
box-sizing: border-box;
background: @table_checkbox_bg !important; background: @table_checkbox_bg !important;
} }
} }
.ivu-table-header {
border: 1px solid @table-header-bg;
th {
.ivu-checkbox-inner {
border: 1px solid @table_checkbox_bd_header;
} }
} color: @table-header-color !important;
border: @table-body-bd;
height: 60px;
font-weight: 400;
background: @table-header-bg !important;
border-right: 1px solid @header_bd_right;
} }
} }
.ivu-table-body { .ivu-table-body {
background-color: @table-body-bg; background-color: @table-body-bg;
border: 1px solid @table-body-bd; border: 1px solid @table-body-bd;
tr:nth-child(odd) td {
tr:nth-child(odd) {
height: 60px;
td {
//表格内checkbox
.ivu-checkbox-inner {
background: @checkbox-inner;
border-radius: 1px;
border: 1px solid @table_checkbox_bd;
}
//选中状态
.ivu-checkbox-checked {
.ivu-checkbox-inner {
box-sizing: border-box;
background: @table_checkbox_bg !important;
}
}
background-color: @table-body-bg; background-color: @table-body-bg;
border: @table-body-bd_odd;
border-right: 1px solid transparent !important;
.ivu-table-cell {
span {
color: @table_body_allcol;
}
}
} }
tr:nth-child(even) td {
background-color: @table-body-bg_even;
} }
tr:nth-child(even) { tr {
height: 60px; height: 60px;
td { td {
//表格内checkbox border-top: 1px solid @table-tr-bd;
.ivu-checkbox-inner { border-right: 1px solid @table-tr-bd;
background: @checkbox-inner; border-left: 1px solid @table-tr-bd;
border-radius: 1px; border-bottom: 1px solid @table-body-bg;
border: 1px solid @table_checkbox_bd; span {
} color: @table_body_allcol;
//选中状态
.ivu-checkbox-checked {
.ivu-checkbox-inner {
box-sizing: border-box;
background: @table_checkbox_bg !important;
}
} }
background-color: @table-body-bg_even;
border: @table-body-bd_odd;
border-right: 1px solid transparent !important;
.ivu-table-cell { .ivu-table-cell {
span { span {
color: @table_body_allcol; color: @table_body_allcol;
...@@ -443,20 +445,18 @@ export default { ...@@ -443,20 +445,18 @@ export default {
} }
} }
} }
tr.ivu-table-row:hover {
.ivu-table-row-hover, box-shadow: @table_line_shadow;
.ivu-table-row-highlight {
td { td {
background: @table-row-hover !important; background: @table-row-hover;
border: 2px solid @table_line !important; border-top: 2px solid @table_line;
border-right: 2px solid @table_highbd !important; border-bottom: 2px solid @table_line;
border-left: 2px solid transparent !important;
} }
td:first-child { td:first-child {
border-left: 2px solid @table_line !important; border-left: 2px solid @table_line;
} }
td:last-child { td:last-child {
border-right: 2px solid @table_line !important; border-right: 2px solid @table_line;
} }
} }
} }
...@@ -465,97 +465,14 @@ export default { ...@@ -465,97 +465,14 @@ export default {
//表格下边框线 //表格下边框线
background-color: @table-boder !important; background-color: @table-boder !important;
} }
.ivu-table-border:after { .ivu-table-border:after {
//表格右边框线 //表格右边框线
background-color: @table-boder !important; background-color: @table-boder !important;
} }
} }
//表格头部 }
// .ivu-table-header, .page_index {
// .ivu-table-fixed-header { padding-right: 40px;
// border: 1px solid @table-header-border !important; margin: 30px 0 19px 0;
// background: @table-header-bg !important;
// min-height: 60px;
// height: 60px;
// font-weight: 400;
// box-sizing: border-box;
// }
// .ivu-table-header thead tr th,
// .table-tools table thead tr th,
// .ivu-table-fixed-header thead tr th,
// .ivu-table-fixed-header {
// height: 60px;
// padding: 0 !important;
// background: @table-header-bg !important;
// border: 1px solid @table-header-border !important;
// color: @table-header-color !important;
// box-sizing: border-box;
// }
// .ivu-table-tip {
// background: @table-body-bg !important;
// }
// /*底色斑马纹*/
// .ivu-table td {
// font-weight: 400;
// height: 60px !important;
// min-height: 60px !important;
// background-color: @table-body-bg;
// border: 1px solid @table-bottom_line !important;
// }
// .ivu-table tr:nth-child(even) td {
// background-color: @table-body-bg_even !important;
// }
// .ivu-table-body {
// background-color: @table-body-bg;
// }
// .ivu-table-wrapper tr td {
// background-color: @table-body-bg;
// // border: 1px solid @tableCommon-boder !important;
// }
// //表格内部线条
// .ivu-table-border td {
// border: 1px solid @tableCommon-boder !important;
// }
//
// /*选中某一行高亮*/
// .ivu-table-row:hover {
// background: @table-row-hover !important;
// border: 2px solid @table_line !important;
// box-sizing: border-box;
// }
// .ivu-table-row-highlight td {
// background: @table-row-hover !important;
// border: 2px solid @table_line !important;
// border-right: 2px solid transparent !important;
// }
// /*浮在某行*/
// .ivu-table-row-hover td,
// .ivu-table tr:nth-child(even):hover {
// background: @table-row-hover !important;
// border: 2px solid @table_line !important;
// border-right: 2px solid transparent !important;
// border-left: 2px solid transparent !important;
// }
// .ivu-table-row-hover td:first-child {
// border-left: 2px solid @table_line !important;
// }
// .ivu-table-row-hover td:last-child {
// border-right: 2px solid @table_line !important;
// }
//
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment