vue+element-ui实现表格时候,只容许第一行编辑或删除

<el-table
:data="tableData"
style="width: 100%"
>
<el-table-column label="操做" width="200">
  <template slot-scope="scope" v-if="scope.$index==0">
    <el-button type="text" size="small" class="detailsBtn" @click="updata(scope.row)">
      <i class="el-icon-edit">编辑</i>
    </el-button>
    <el-button type="text" size="small" class="delBtn"  @click="deleteFun(scope.row)">
      <i class="el-icon-circle-close"></i> 删除
    </el-button>
  </template>
 </el-table-column>
</el-table>
  --------------------重点------------------------
  在el-table-column标签内的template上添加v-if="scope.$index==0"
  第二种方法::disabled="scope.$index !=0"
    <el-table
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column label="操做" width="200">
      <template slot-scope="scope" v-if="scope.$index==0">
        <el-button type="text" size="small" class="detailsBtn" @click="updata(scope.row)" :disabled="scope.$index !=0">
          <i class="el-icon-edit">编辑</i>
        </el-button>
        <el-button type="text" size="small" class="delBtn"  @click="deleteFun(scope.row)" :disabled="scope.$index !=0">
          <i class="el-icon-circle-close"></i> 删除
        </el-button>
      </template>
      </el-table-column>
     </el-table>
 -------------------重点代码-------------
      在须要禁止的按钮上绑定(el-button):disabled="scope.$index !=0"复制代码
相关文章
相关标签/搜索