获取 ElemenUi 组件的 ID VueJs

Question

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

这是我的table

这是我的 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
        });
      }
    }

Answer 1

您可以使用 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会缓存计算结果，对性能提升有一定的好处

获取 ElemenUi 组件的 ID VueJs

Get id of an ElemenUi component VueJs

javascript

vue.js

element-ui