CODEWITHSUNDEEP
javascriptvue.jselement-ui
Sebas Carrillo
Sebas Carrillo

Reputation: 123

Get id of an ElemenUi component VueJs

I need to get an id of the ElementUi component <el-table-column> to be able to remove the results coming from my MySQL database.

This is my table

enter image description here

This is my elementUi component

   el-table
        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        max-height="500">
        <el-table-column
          prop="id"
          label="Id"
          width="150">
    </el-table-column>
      <el-table-column
          prop="username"
          label="Username"
          width="120">
        </el-table-column> 
    .....

These are the edit and delete actions

   <el-table-column
          align="right"
          fixed="right"
          width="150px">
          <template slot="header" slot-scope="scope">
            <el-input
              v-model="search"
              size="mini"
              placeholder="Username"/>
          </template>
          <template slot-scope="scope">
           <button class="buttons-edit edit" @click.prevent="deleteUser(tableData[scope.$index].id)">editar</button>
             <button class="buttons-edit delete" @click.prevent="deleteUser(tableData[scope.$index].id)">Eliminar</button>
          </template>
        </el-table-column>

In order to bring the id of the column I am using:

 tableData[scope.$index].putLink

but I have not succeeded satisfactorily.

This is my method to delete the user which receives an id that I could not obtain

deleteUser(id) {
      if (window.confirm("Desea eliminar el usuario " + this.id+ "?") == true) {
        console.log("Eliminado");
        this.$http.post("user/delete/" + id).then(res => {
          if (res.status == 200) {
            alert("Se ha eliminado el usuario!");
            this.getUsers();
          }
        });
      } else {
        alert("Cancelado", "", "error", {
          buttons: false,
          timer: 600
        });
      }
    }

Upvotes: 0

Views: 979

Answers (1)

huguangju
huguangju

Reputation: 163

you can use scope.row to access you column data. see document

<el-table-column
  align="right"
  fixed="right"
  width="150px">
  <template slot-scope="scope">
    <button class="buttons-edit edit" @click.prevent="deleteUser(scope.row.id)">editar</button>
    <button class="buttons-edit delete" @click.prevent="deleteUser(scope.row.id)">Eliminar</button>
  </template>
</el-table-column>

Or, you can use it by es6 object destructuring：

  <template slot-scope="{ row }">
    <button class="buttons-edit edit" @click.prevent="deleteUser(row.id)">editar</button>
    <button class="buttons-edit delete" @click.prevent="deleteUser(row.id)">Eliminar</button>
  </template>

I have another little suggestion, Don’t process too much data in the template, you can put it in computed for processing

:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"

like this

  computed: {
    tableDataFormatted () {
      return this.tableData.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()))
    }
  }

:data="tableDataFormatted"

This can reduce the complexity of your template, and computed will cache the calculation results, which has some benefits for performance improvement

Upvotes: 2

Related Questions