|
|
@@ -1,128 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="table_template">
|
|
|
- <table class="table">
|
|
|
- <thead>
|
|
|
- <tr :style="tableHeadStyle">
|
|
|
- <td v-for="(item, index) in tableHeader" :key="index" :style="tableHeadStyle">{{ item }}</td>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- <tr v-for="(obj, index) in tableData" :key="index" :class="{ table_gray: !discolor && index%2 === 0 }">
|
|
|
- <td :style="trStyle" v-if="flag">{{ index + 1 }}</td>
|
|
|
- <td v-for="(item, index) in obj" :key="index" :style="trStyle">
|
|
|
- {{ item }}
|
|
|
- </td>
|
|
|
- <td v-if="operation" :style="trStyle">
|
|
|
- <span
|
|
|
- v-for="(operationObj, i) in operation" :key="i"
|
|
|
- @click="operationObj.function(index)"
|
|
|
- :style="operationStyle"
|
|
|
- >{{ operationObj.name }}
|
|
|
- </span>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-export default {
|
|
|
- props: {
|
|
|
- // 表数据
|
|
|
- tableData: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return []
|
|
|
- }
|
|
|
- },
|
|
|
- // 表头
|
|
|
- tableHeader: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return []
|
|
|
- }
|
|
|
- },
|
|
|
- // 表头样式
|
|
|
- tableHeadStyle: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {
|
|
|
- background: '#848484',
|
|
|
- height: '50px',
|
|
|
- color: '#fff'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 操作按钮
|
|
|
- operation: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return []
|
|
|
- }
|
|
|
- },
|
|
|
- // 操作样式
|
|
|
- operationStyle: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {
|
|
|
- color: '#0000ff'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 表格除去表头的样式
|
|
|
- trStyle: {
|
|
|
- type: Object,
|
|
|
- default: () => {
|
|
|
- return {
|
|
|
- width: '200px',
|
|
|
- height: '50px'
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- // 是否隔行变色
|
|
|
- discolor: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- // 每页表格共有多少数据
|
|
|
- pageSize: {
|
|
|
- type: Number,
|
|
|
- default: 20
|
|
|
- },
|
|
|
- flag: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="less">
|
|
|
-.table_template{
|
|
|
- text-align: center;
|
|
|
- .table{
|
|
|
- background-color: #fff;
|
|
|
- border-collapse:collapse;
|
|
|
- border:none;
|
|
|
- width: 100%;
|
|
|
- td{
|
|
|
- border: 1px solid #ccc;
|
|
|
- }
|
|
|
- span{
|
|
|
- &:hover{
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.table_gray{
|
|
|
- background: #f5f5f5;
|
|
|
-}
|
|
|
-</style>
|