vue element-ui get index of table row

Question

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>

ThreeCheeseHigh · Accepted Answer · 2020-02-25 18:38:53Z

9

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

edited Feb 25, 2020 at 18:38

ThreeCheeseHigh

1,4985 gold badges24 silver badges41 bronze badges

answered Aug 20, 2019 at 7:55

once

1,3994 gold badges25 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SteamFire Over a year ago

What if you filter the data or sort them? This won't work anymore I think...

Michael · Accepted Answer · 2020-07-16 19:24:16Z

2

vue template & scope.$index

my solution:

 <el-table
    :data="tableData"
    border
    class="app-downlaod-guide-table"
    style="width: 100%">
    <el-table-column
      v-for="({
        prop,
        label,
        align,
        width,
        slot,
      }, i) in channelClomuns"
      :key="prop + i"
      :prop="prop"
      :width="width"
      :align="align"
      :label="label">
      <template
        slot-scope="scope"
        v-if="prop === `putLink`">
        <a
          target="_blank"
          href="tableData[scope.$index].putLink">
          {{tableData[scope.$index].putLink}}
        </a>
      </template>
    </el-table-column>
  </el-table>

edited Jul 16, 2020 at 19:24

Michael

7678 silver badges34 bronze badges

answered Dec 25, 2019 at 12:56

xgqfrms

12.4k1 gold badge81 silver badges73 bronze badges

1 Comment

SteamFire Over a year ago

What if you filter the data or sort them? This won't work anymore I think...

Collectives™ on Stack Overflow

vue element-ui get index of table row

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related