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"複製代碼
相關文章
相關標籤/搜索