vue element-ui get index of table row

vue.js html-table row element-ui
once picture once · Aug 20, 2019 · Viewed 9.3k times · Source

I want to add a button only to the first row of a table column (labeled with 'Option' in the example code). Is there any simple way to check the row index for v-if v-if="scope.row.index === 0" ? scope.row.index wont work here.

<el-table :data="mydata">
<!-- more columns -->
  <el-table-column prop="option" label="Option">
    <template slot-scope="scope">
      <div v-if="scope.row.index === 0">
        <el-row>
          <el-col>
            <el-input v-model="scope.row.option"/>
          </el-col>
          <el-col>
            <el-button @click="">Check</el-button>
          </el-col>
      </el-row></div>
      <div v-else>
        <el-input v-model="scope.row.option" />
      </div>
    </template>
  </el-table-column>
<!-- more columns -->
</el-table>

Answer

once picture once · Aug 20, 2019

I found a solution to this by using the $index variable, which is the index of the current row.

<div v-if="scope.$index === 0">

Related questions

bootstrap-vue table td element styling

I have an issue by giving styles to the <td> tag of b-table element. This is the template: <b-table :fields="fields" :items="items" class="mx-1 mt-2" v-if="items && items.length > 0" > <template slot="…

Read More
Bootstrap-vue b-table with filter in header

I have a table generated with bootstrap-vue that shows the results of a system search. The Results Table shows the records to the user, and the user can sort them and filter them. How can I add the search field …

Read More
vue.js v-for on two table rows

Vue 2, no webpack. I want to render two trs at a time, for main and detail expandable row. This is what I'm trying to achieve: <table> <tbody> <div v-for="item in items"> <tr&…

Read More