获取 ElemenUi 组件 VueJs 的 id

问题描述

我需要获取 ElementUi 组件 <el-table-column> 的 id 才能删除来自我的 MysqL 数据库的结果。

这是我的桌子

这是我的 elementUi 组件

   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> 
    .....

这些是编辑和删除操作

   <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>

为了带上我正在使用的列的 id：

 tableData[scope.$index].putLink

但我没有成功。

这是我删除接收到我无法获取的 id 的用户的方法

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
        });
      }
    }

解决方法

您可以使用 scope.row 访问您的列数据。见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>

或者，也可以通过es6对象解构来使用：

  <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>

我还有一个小建议，模板里的数据不要处理太多，可以放到computed中进行处理

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

喜欢这个

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

:data="tableDataFormatted"

这样可以降低你模板的复杂度，computed 会缓存计算结果，对性能提升有一定的好处

javascript vue.js