Vue项目-Element-UI可编辑表格

1、HTML

<template>
  <div class="cesiumTabRoot">
    <el-table
      :data="tabData"
      border
      :cell-class-name="tabCellClassName"
      :row-class-name="tabRowClassName"
      @cell-click="cellClick">
      <!-- 序号 -->
      <el-table-column type="index" label="序号" width="50"></el-table-column>

      <!-- 姓名 -->
      <el-table-column label="姓名">
        <template slot-scope="{ row, column }">
          <!-- 编辑 -->
          <el-input
            v-focus
            v-if="rowIndex === row.index && columnIndex === column.index"
            v-model="row.name"
            @blur="hideInput"></el-input>

          <!-- 显示 -->
          <span v-else>{{ row.name }}</span>
        </template>
      </el-table-column>

      <!-- 年龄 -->
      <el-table-column label="年龄">
        <template slot-scope="{ row, column }">
          <!-- 编辑 -->
          <el-input
            v-focus
            v-if="rowIndex === row.index && columnIndex === column.index"
            v-model="row.age"
            @blur="hideInput"></el-input>

          <!-- 显示 -->
          <span v-else>{{ row.age }}</span>
        </template>
      </el-table-column>

      <!-- 性别 -->
      <el-table-column label="性别">
        <template slot-scope="{ row, column }">
          <!-- 编辑 -->
          <el-input
            v-focus
            v-if="rowIndex === row.index && columnIndex === column.index"
            v-model="row.sex"
            @blur="hideInput"></el-input>

          <!-- 显示 -->
          <span v-else>{{ row.sex }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

2、Script

<script>
export default {
  name: "CesiumTab",
  components: {},
  props: {},
  data() {
    return {
      // 表格数据
      tabData: [
        {
          name: "张三",
          age: 18,
          sex: "男"
        },
        {
          name: "李四",
          age: 19,
          sex: "男"
        },
        {
          name: "王五",
          age: 20,
          sex: "男"
        },
      ],
      // 行index
      rowIndex: null,
      // 列index
      columnIndex: null,
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    // 给表格单元格数据添加列下标
    tabCellClassName({ column, columnIndex }) {
      column.index = columnIndex + 1;
    },
    // 表格行class-name
    tabRowClassName({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    // 点击表格单元格编辑
    cellClick(row, column) {
      this.rowIndex = row.index;
      this.columnIndex = column.index;
    },
    // 表格input失去焦点
    hideInput() {
      this.rowIndex = null;
      this.columnIndex = null;
    },
  },
};
</script>

3、Css

<style lang="less" scoped>
.cesiumTabRoot {
  width: 100%;
  height: 100vh;

  .cesiumTab {
    width: 100%;
    height: 100%;
    background-color: rgba(#041a07, 0.7);
    padding: 10px;
    border: 1px solid #049a57;
    box-sizing: border-box;

    // 表格
    /deep/ .el-table::before {
      background: #4caa81;
    }

    /deep/ .el-table::after {
      background: #4caa81;
    }

    /deep/ .el-table {
      width: 100%;
      height: 80% !important;
      background-color: transparent;
      border-color: #4caa81;
      display: flex;
      flex-direction: column;

      .el-input {
        width: 90%;

        .el-input__inner {
          color: #fff !important;
          height: 20px !important;
        }
      }

      & tr {
        background-color: transparent !important;
      }

      th,
      td {
        text-align: center;
        border-color: #4caa81;
        color: #fff;
        background-color: transparent !important;
      }

      .el-table__cell {
        padding: 5px 0px !important;
      }

      .cell {
        padding: 0px !important;
      }

      .el-table__body-wrapper {
        width: 100%;
        flex: 1;
        overflow-y: auto;
      }
    }
  }
}
</style>