|
@@ -1,17 +1,10 @@
|
|
|
<template>
|
|
|
- <div
|
|
|
- class="security-check-table-wrapper"
|
|
|
- :style="{ height: tableWrapperHeight }"
|
|
|
- >
|
|
|
+ <div class="security-check-table-wrapper" :style="{ height: tableWrapperHeight }">
|
|
|
<a-table
|
|
|
:data-source="tableData"
|
|
|
:columns="columns"
|
|
|
:row-key="rowKey"
|
|
|
- :row-selection="
|
|
|
- withSelection
|
|
|
- ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange }
|
|
|
- : null
|
|
|
- "
|
|
|
+ :row-selection="withSelection ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange } : null"
|
|
|
:rowClassName="rowClassName"
|
|
|
bordered
|
|
|
:pagination="pagination"
|
|
@@ -19,16 +12,10 @@
|
|
|
:loading="loading"
|
|
|
:scroll="{ y: 650 }"
|
|
|
>
|
|
|
- <template
|
|
|
- v-if="withOperateColumn"
|
|
|
- slot="operation"
|
|
|
- slot-scope="text, record"
|
|
|
- >
|
|
|
+ <template v-if="withOperateColumn" slot="operation" slot-scope="text, record">
|
|
|
<div class="column-operate">
|
|
|
<span class="cell-operate-edit" @click="editRow(record)">修改</span>
|
|
|
- <span class="cell-operate-delete" @click="deleteRow(record)"
|
|
|
- >删除</span
|
|
|
- >
|
|
|
+ <span class="cell-operate-delete" @click="deleteRow(record)">删除</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</a-table>
|
|
@@ -37,11 +24,11 @@
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- name: "SecurityCheckTable",
|
|
|
+ name: 'SecurityCheckTable',
|
|
|
props: {
|
|
|
height: {
|
|
|
type: [Number, String],
|
|
|
- default: "50vh",
|
|
|
+ default: '40vh',
|
|
|
},
|
|
|
tableCols: {
|
|
|
type: Array,
|
|
@@ -53,7 +40,7 @@ export default {
|
|
|
},
|
|
|
rowKey: {
|
|
|
type: String,
|
|
|
- default: "key",
|
|
|
+ default: 'key',
|
|
|
},
|
|
|
withSelection: {
|
|
|
type: Boolean,
|
|
@@ -75,7 +62,7 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
selectedRowKeys: [],
|
|
|
- };
|
|
|
+ }
|
|
|
},
|
|
|
computed: {
|
|
|
columns() {
|
|
@@ -84,40 +71,40 @@ export default {
|
|
|
if (col.clickHandler) {
|
|
|
col.customCell = (row, rowIndex) => {
|
|
|
return {
|
|
|
- class: "cell-click",
|
|
|
+ class: 'cell-click',
|
|
|
on: {
|
|
|
click: () => {
|
|
|
- col.clickHandler(row, rowIndex);
|
|
|
+ col.clickHandler(row, rowIndex)
|
|
|
},
|
|
|
},
|
|
|
- };
|
|
|
- };
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
if (col.children) {
|
|
|
- setClickHandler(col.children);
|
|
|
+ setClickHandler(col.children)
|
|
|
}
|
|
|
- return col;
|
|
|
- });
|
|
|
+ return col
|
|
|
+ })
|
|
|
}
|
|
|
- return setClickHandler(this.tableCols);
|
|
|
+ return setClickHandler(this.tableCols)
|
|
|
},
|
|
|
tableWrapperHeight() {
|
|
|
- return typeof this.height === "number" ? this.height + "px" : this.height;
|
|
|
+ return typeof this.height === 'number' ? this.height + 'px' : this.height
|
|
|
},
|
|
|
withOperateColumn() {
|
|
|
- return this.columns.find((col) => col.dataIndex === "operation");
|
|
|
+ return this.columns.find((col) => col.dataIndex === 'operation')
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
onSelectChange(selectedRowKeys, selectedRows) {
|
|
|
// console.log(selectedRowKeys)
|
|
|
- this.selectedRowKeys = selectedRowKeys;
|
|
|
+ this.selectedRowKeys = selectedRowKeys
|
|
|
},
|
|
|
rowClassName(index) {
|
|
|
if (index.index % 2 == 0) {
|
|
|
- return "warning-row";
|
|
|
+ return 'warning-row'
|
|
|
} else {
|
|
|
- return "warning-rows";
|
|
|
+ return 'warning-rows'
|
|
|
}
|
|
|
},
|
|
|
editRow(row) {
|
|
@@ -130,10 +117,10 @@ export default {
|
|
|
// console.log(index)
|
|
|
},
|
|
|
handleTableChange(pagination, filters, sorter) {
|
|
|
- this.$emit("handleTableChange", pagination);
|
|
|
+ this.$emit('handleTableChange', pagination)
|
|
|
},
|
|
|
},
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -141,13 +128,19 @@ export default {
|
|
|
width: 100%;
|
|
|
::v-deep .ant-table {
|
|
|
width: 100%;
|
|
|
+ .ant-table-placeholder {
|
|
|
+ min-height: 600px;
|
|
|
+ }
|
|
|
+ .ant-table-tbody {
|
|
|
+ min-height: 600px !important;
|
|
|
+ }
|
|
|
.ant-table-thead {
|
|
|
th {
|
|
|
padding: 18px 12px;
|
|
|
}
|
|
|
.ant-table-column-title {
|
|
|
font-size: 14px;
|
|
|
- font-family: Helvetica, "Microsoft YaHei";
|
|
|
+ font-family: Helvetica, 'Microsoft YaHei';
|
|
|
color: #101116;
|
|
|
font-weight: bold;
|
|
|
}
|
|
@@ -163,7 +156,7 @@ export default {
|
|
|
}
|
|
|
td {
|
|
|
font-size: 14px;
|
|
|
- font-family: Helvetica, "Microsoft YaHei";
|
|
|
+ font-family: Helvetica, 'Microsoft YaHei';
|
|
|
color: #101116;
|
|
|
&.cell-click {
|
|
|
color: #2d67e3;
|