| 1 |
- {"ast":null,"code":"export default {\n props: {\n tableData: {\n type: Array,\n required: true\n },\n columns: {\n type: Array,\n required: true\n },\n handleDelete: Function,\n handleEdit: Function,\n handleAdd: Function\n }\n};","map":{"version":3,"names":["props","tableData","type","Array","required","columns","handleDelete","Function","handleEdit","handleAdd"],"sources":["src/components/MyTable/index.vue"],"sourcesContent":["<template>\n <div class=\"table-box\">\n <el-table class=\"table-el\" :data=\"tableData\" style=\"background-color: transparent;\">\n <el-table-column v-for=\"column in columns\" :key=\"column.prop\" :prop=\"column.prop\" :label=\"column.label\" :width=\"column.width\">\n <template slot-scope=\"scope\">\n <div v-if=\"column.prop=='operationDelete'\">\n <button class=\"imgOperationDelete\" @click=\"handleDelete(scope.row[column.prop])\"></button>\n </div>\n <div v-if=\"column.prop=='operationEdit'\">\n <button class=\"imgOperationEdit\" @click=\"handleEdit(scope.row)\"></button>\n </div>\n <div v-if=\"column.prop!=='operationDelete' && column.prop!=='operationEdit'\">{{scope.row[column.prop]}}</div>\n </template>\n </el-table-column>\n </el-table>\n <button class=\"imgOperationAdd\" @click=\"handleAdd()\"></button>\n </div>\n</template>\n\n<script>\nexport default {\n props: {\n tableData: {\n type: Array,\n required: true\n },\n columns: {\n type: Array,\n required: true\n },\n handleDelete: Function,\n handleEdit: Function,\n handleAdd: Function,\n }\n};\n</script>\n<style>\n.imgOperationDelete{\n background-image: url(../../assets/delete.png);\n background-color:transparent;\n background-repeat: no-repeat;\n background-size: 100% 100%;\n height: 20px;\n width: 20px;\n}\n\n.imgOperationEdit{\n background-image: url(../../assets/edit.png);\n background-color:transparent;\n background-repeat: no-repeat;\n background-size: 100% 100%;\n height: 20px;\n width: 20px;\n}\n.flex-container {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh; /* or any other height */\n}\n.imgOperationAdd{\n background-image: url(../../assets/add.png);\n background-color:transparent;\n background-repeat: no-repeat;\n display: flex;\n justify-content: center;\n align-items: center;\n background-size: 100% 100%;\n height: 20px;\n width: 20px;\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n.el-table__header-wrapper,.el-table__body-wrapper,.el-table__cell,tr {\n background-color: transparent !important;\n color: #ebebeb !important;\n font-size: 12px !important;\n}\n\n.el-table__header-wrapper .el-table__cell{\n color: #fff !important;\n font-size: 14px !important;\n font-weight: bold;\n}\n.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{\n border-bottom: 0!important;\n} \n.el-table--border::after, .el-table--group::after, .el-table::before{\n background-color: transparent;\n}\ntr{\n height: 4.4vh!important;\n}\nthead tr {\n /* background-color: #202020 !important; */\n}\ntbody tr {\n /* background-color: #141414 !important; */\n}\n.el-table .el-table__cell{\n padding: 5px 0;\n height: 4.4vh!important;\n}\n\n.table-box{\n width: 70vw;\n height: 70vh;\n}\n\n.table-el{\n background-color: transparent;\n overflow: auto;\n width: 70vw;\n height: 65vh;\n}\n\n</style>"],"mappings":"AAoBA;EACAA,KAAA;IACAC,SAAA;MACAC,IAAA,EAAAC,KAAA;MACAC,QAAA;IACA;IACAC,OAAA;MACAH,IAAA,EAAAC,KAAA;MACAC,QAAA;IACA;IACAE,YAAA,EAAAC,QAAA;IACAC,UAAA,EAAAD,QAAA;IACAE,SAAA,EAAAF;EACA;AACA"},"metadata":{},"sourceType":"module","externalDependencies":[]}
|
