pc_shop_site/components/table/UnitTable.vue

<template>
  <div>
    <p class="tb-title">Markup %</p>
    <el-table ref="elTable" border :data="tableData" :highlight-current-row=false :style="{ width: operateWith }"
      :header-cell-style="{
        backgroundColor: '#fff',
        color: '#606266', fontWeight: 500, fontSize: '16px',
      }">
      <template v-for="item in tableColumns">
        <el-table-column v-if="item.isText" align="center" :key="item.prop" :prop="item.prop" :label="item.label"
          :formatter="item.formatter" :width="item.width" :sortable="item.sortable"></el-table-column>
        <el-table-column v-if="!item.isText" :key="item.prop" :prop="item.prop" :label="item.label"
          :formatter="item.formatter" :width="item.width" :align="item.align ? item.align : 'center'"
          :sortable="item.sortable">
          <template v-slot="{ row, $index }">
            <!-- 编辑输入框  -->
            <el-input @input="saveUnitData(row, $index)" v-model="row[item.prop]" class="edit-input" size="small"
              type="number" min="0" />
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: [],
    },
    tableColumns: {
      type: Array,
      default: [],
    },
    operateWith: {
      type: String,
      default: "100%",
    },
    selectionShow: {
      type: Boolean,
      default: false,
    },
    handleShow: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    saveUnitData(row, idx) {
      this.tableData[idx] = row
      localStorage.setItem('unit', JSON.stringify(this.tableData))
    }
  },
};
</script>

<style lang="scss" scoped>
.tb-title {
  background-color: #E90000;
  color: #fff;
  font-size: 16px;
  text-align: center;
  padding: 9px 0;
  margin-top: 20px;
  font-weight: 600;
}

:deep(.el-table__body) {

  // margin-bottom:20px;
  // tr:hover>td.el-table__cell {
  //   background-color: rgba(0, 0, 0, 0) !important;
  // }
  tr:not(:first-child) {

    // .is-center:nth-child(2){
    //   border-right: 1px solid #EFEFEF;
    // }
    td:nth-of-type(n+3) {
      display: none;
    }
  }

  .el-table__cell {
    padding: 10px 0;

    input {
      text-align: center;
    }
  }
}

:deep(.is-center:nth-child(1)) {
  border-right: 1px solid #EFEFEF;
}

:deep(.el-input__inner) {
  padding-right: 0;
}
</style>