dvcp_v2_webapp/packages/bigscreen/designer/components/tableEditor.vue

<script>
import Vue from 'vue'

export default {
  name: "tableEditor",
  model: {
    event: "input",
    prop: "tableData"
  },
  props: {
    label: String,
    tableData: {default: () => []},
    configs: {default: () => []}
  },
  data() {
    return {
      records: []
    }
  },
  computed: {
    option() {
      return {
        size: 'mini',
        filterDic: true,
        cellBtn: true,
        menuWidth: 120,
        addBtn: false,
        columnBtn: false,
        refreshBtn: false,
        border: true,
        delBtnText: " ",
        editBtnText: " ",
        saveBtnText: " ",
        saveBtnIcon: "el-icon-check",
        cancelBtnText: " ",
        cancelBtnIcon: "el-icon-close",
        column: this.configs.map(e => {
          const item = this.$copy(e)
          delete item.$index
          delete item.$cellEdit
          return {...item, cell: true}
        })
      }
    },
  },
  methods: {
    rowSave(form, done) {
      this.$emit("input", this.records)
      this.$emit("data", this.getFormatData())
      done()
    },
    getFormatData() {
      return this.configs.map((c, i) => {
        const item = {name: c.label}
        this.records.map((row, j) => item[`v${j || ""}`] = row[`c${i || ""}`])
        return item
      })
    }
  },
  created() {
    Vue.use(window.AVUE, {
      size: 'mini',
      tableSize: 'mini',
      calcHeight: 36,
    })
    this.records = this.tableData.map(e => ({$cellEdit: true, ...e}))
  }
}
</script>

<template>
  <section class="tableEditor">
    <avue-crud :option="option" :data="records" @row-save="rowSave" @row-cancel="rowSave">
      <template v-if="label" v-slot:menuLeft>
        <div class="label" v-text="label"/>
      </template>
      <template v-slot:menuRight>
        <div class="el-icon-plus pointer" @click="records.push({$cellEdit: true})">增加数据</div>
      </template>
    </avue-crud>
  </section>
</template>
<style scoped lang="scss">
.tableEditor {
  width: 100%;
  height: auto;
  margin-bottom: 10px;

  :deep(.avue-crud__body) {
    background-color: transparent;

    .avue-crud__header, .el-table, tr {
      background-color: transparent;
    }

    .avue-crud__header {
      min-height: unset;
    }

    .el-table__cell {
      color: white;
      background-color: transparent;

      input:disabled {
        background-color: transparent;
        border-color: transparent;
        color: white;
        padding: 0;
      }
    }

    .label {
      width: 60px;
      color: #FFFFFF;
      font-size: 12px;
      text-align: right;
    }

    .el-icon-plus {
      font-size: 12px;
      color: $primaryColor;

      &:before {
        margin-right: 4px;
      }
    }
  }

  &:last-of-type {
    margin-bottom: 0;
  }
}
</style>