|
@@ -14,10 +14,10 @@
|
|
|
"
|
|
|
:rowClassName="rowClassName"
|
|
|
bordered
|
|
|
- :pagination = "pagination"
|
|
|
- @change="handleTableChange"
|
|
|
- :loading="loading"
|
|
|
- :scroll="{ y: height }"
|
|
|
+ :pagination="pagination"
|
|
|
+ @change="handleTableChange"
|
|
|
+ :loading="loading"
|
|
|
+ :scroll="{ y: height }"
|
|
|
>
|
|
|
<template
|
|
|
v-if="withOperateColumn"
|
|
@@ -25,10 +25,14 @@
|
|
|
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-edit"
|
|
|
+ @click="editRow(record)"
|
|
|
+ >修改</span>
|
|
|
+ <span
|
|
|
+ class="cell-operate-delete"
|
|
|
+ @click="deleteRow(record)"
|
|
|
+ >删除</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</a-table>
|
|
@@ -37,109 +41,103 @@
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- name: "SecurityCheckTable",
|
|
|
+ name: 'SecurityCheckTable',
|
|
|
props: {
|
|
|
height: {
|
|
|
type: [Number, String],
|
|
|
- default: "50vh",
|
|
|
+ default: '50vh'
|
|
|
},
|
|
|
tableCols: {
|
|
|
type: Array,
|
|
|
- default: () => [],
|
|
|
+ default: () => []
|
|
|
},
|
|
|
tableData: {
|
|
|
type: Array,
|
|
|
- default: () => [],
|
|
|
+ default: () => []
|
|
|
},
|
|
|
rowKey: {
|
|
|
type: String,
|
|
|
- default: "key",
|
|
|
+ default: 'key'
|
|
|
},
|
|
|
withSelection: {
|
|
|
type: Boolean,
|
|
|
- default: false,
|
|
|
+ default: false
|
|
|
},
|
|
|
loading: {
|
|
|
type: Boolean,
|
|
|
- default: false,
|
|
|
+ default: false
|
|
|
},
|
|
|
showSummary: {
|
|
|
type: Boolean,
|
|
|
- default: false,
|
|
|
+ default: false
|
|
|
},
|
|
|
- pagination:{
|
|
|
- type:Object,
|
|
|
- default: null,
|
|
|
+ pagination: {
|
|
|
+ type: Object,
|
|
|
+ default: null
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- selectedRowKeys: [],
|
|
|
- };
|
|
|
+ selectedRowKeys: []
|
|
|
+ }
|
|
|
},
|
|
|
computed: {
|
|
|
columns() {
|
|
|
- return this.tableCols.map((col) => {
|
|
|
- if (col.clickHandler) {
|
|
|
- col.customCell = (data) => {
|
|
|
- return {
|
|
|
- class: "cell-click",
|
|
|
- on: {
|
|
|
- click: col.clickHandler,
|
|
|
- },
|
|
|
- };
|
|
|
- };
|
|
|
- }
|
|
|
- if (col.children) {
|
|
|
- col.children.forEach((res) => {
|
|
|
- if (res.clickHandler) {
|
|
|
- res.customCell = () => {
|
|
|
- return {
|
|
|
- class: "cell-click",
|
|
|
- on: {
|
|
|
- click: res.clickHandler,
|
|
|
- },
|
|
|
- };
|
|
|
- };
|
|
|
+ function setClickHandler(columns) {
|
|
|
+ return columns.map(col => {
|
|
|
+ if (col.clickHandler) {
|
|
|
+ col.customCell = (row, rowIndex) => {
|
|
|
+ return {
|
|
|
+ class: 'cell-click',
|
|
|
+ on: {
|
|
|
+ click: () => {
|
|
|
+ col.clickHandler(row, rowIndex)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- });
|
|
|
- }
|
|
|
- return col;
|
|
|
- });
|
|
|
+ }
|
|
|
+ if (col.children) {
|
|
|
+ setClickHandler(col.children)
|
|
|
+ }
|
|
|
+ return col
|
|
|
+ })
|
|
|
+ }
|
|
|
+ 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) {
|
|
|
- console.log("edit");
|
|
|
+ console.log('edit')
|
|
|
},
|
|
|
deleteRow(row) {
|
|
|
- console.log("delete");
|
|
|
+ console.log('delete')
|
|
|
},
|
|
|
clickHandler(index) {
|
|
|
- console.log(index);
|
|
|
+ console.log(index)
|
|
|
},
|
|
|
- handleTableChange(pagination, filters, sorter){
|
|
|
- this.$emit("handleTableChange",pagination)
|
|
|
+ handleTableChange(pagination, filters, sorter) {
|
|
|
+ this.$emit('handleTableChange', pagination)
|
|
|
}
|
|
|
- },
|
|
|
-};
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -153,7 +151,7 @@ export default {
|
|
|
}
|
|
|
.ant-table-column-title {
|
|
|
font-size: 14px;
|
|
|
- font-family: Helvetica, "Microsoft YaHei";
|
|
|
+ font-family: Helvetica, 'Microsoft YaHei';
|
|
|
color: #101116;
|
|
|
font-weight: bold;
|
|
|
}
|
|
@@ -169,7 +167,7 @@ export default {
|
|
|
}
|
|
|
td {
|
|
|
font-size: 14px;
|
|
|
- font-family: Helvetica, "Microsoft YaHei";
|
|
|
+ font-family: Helvetica, 'Microsoft YaHei';
|
|
|
color: #101116;
|
|
|
&.cell-click {
|
|
|
color: #2d67e3;
|