Two methods for inline editing in elementUI’s table

Hits: 0

1. Set an attribute in the row data to distinguish whether the current row or current column is being modified, using v-show to achieve

  1. Add a button in the row, and directly manipulate the current data object, change its value to control whether the current row or current column is modified, pay attention to the click events of several buttons
  2. If the button operation is used outside the table, define a method, pass the index of the row data in the original table data, and operate the data corresponding to the index in the method.

<template>
  <div>
    <el-table :data="list">
        <template slot-scope="{ row }">
          <span v-show="!row.editid">{{ row.id }}</span>
          <el-input v-show="row.editid" v-model="row.id"></el-input>
        </template>
      </el-table-column>

        <template slot-scope="{ row }">
          <span v-show="!row.editname">{{ row.name }}</span>
          <el-input v-show="row.editname" v-model="row.name"></el-input>
        </template>
      </el-table-column>

        <template slot-scope="{ row }">
          <el-button
            v-show="!row.editid"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="row.editid = !row.editid"
          >
            edit id
          </el-button>
          <el-button
            v-show="!row.editname"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="row.editname = !row.editname"
          >
            edit name
          </el-button>
          <el-button
            v-show="row.editid || row.editname"
            type="success"
            size="mini"
            icon="el-icon-circle-check-outline"
            @click="(row.editid = false) || (row.editname = false)"
          >
            Ok
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "growth",
  data() {
    return {
      list: [
        { id : "1" , name : "Outlaw Outlaw" , editid : false , editname : false },
        { id : "2" , name : "Zhang San" , editid : false , editname : false },
      ],
    };
  },
};
</script>

<style lang="scss" scoped></style>>

Second, use the class that comes with el-table to determine whether to display the input box, mainly using css to achieve

  1. el-table needs to add highlight-current-row=”true”, so when a row is clicked, it will be set to the selected state, and the current-row class will be added to the dom node
  2. If you need to clear or change the selected state of a row, use the setCurrentRow method of el-table itself. See the official documentation for details.

<template>
  <div>
    <el-table :data="list" highlight-current-row ref="mytb">
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
          <el-input v-model="row.id"></el-input>
        </template>
      </el-table-column>

        <template slot-scope="{ row }">
          <span>{{ row.name }}</span>
          <el-input v-model="row.name"></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "growth",
  data() {
    return {
      list: [
        { id : "1" , name : "Outlaw Outlaw" },
        { id : "2" , name : "Zhang San" },
      ],
    };
  },
  methods: {
    ok() {
      this.$refs.mytb.setCurrentRow();
    },
  },
};
</script>

<style lang="scss" scoped>
.the-table {
  // By default, that is, when a row is not selected, only span is displayed
  span {
    display: block;
  }
  .el-input {
    display: none;
  }
  // When a row is clicked, the current-row class will be added to the corresponding row, and the new internal style will take effect
  .current-row {
    span {
      display: none;
    }
    .el-input {
      display: block;
    }
  }
}
</style>

Third, the comparison of the two methods

  1. Method 1 is more flexible and can precisely control each column of each row, but it needs to write more v-show and corresponding change methods.
  2. Method 2 The code is simple, the CSS is written well, and there is basically no need to pay attention to this part of the operation in the html, but it is relatively inflexible, controlling a whole row at one time, and cannot control the column

You may also like...

Leave a Reply

Your email address will not be published.