鍍金池/ 問答/HTML/ element怎么隱藏某一列中的一項(xiàng)按鈕？

element怎么隱藏某一列中的一項(xiàng)按鈕？

如圖：想把前兩個(gè)刪除按鈕隱藏，但是最后一個(gè)不隱藏，頁面結(jié)構(gòu)如下怎么寫？

      <el-table-column label="操作" width="200%">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">分配菜單</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
        </template>
      </el-table-column>

clipboard.png

回答
編輯回答
安若晴

這個(gè)按鈕的顯隱也直接綁定在data里面，在button上面用v-show="scope.row.allowDelete控制

補(bǔ)充:

你的表單數(shù)據(jù)應(yīng)該是類似的結(jié)構(gòu)

let tableData = [
    {
        name:"123",
        number:123,
    },
    {
        name:"456",
        number:456,
    }
]

你可以將其補(bǔ)充為

let tableData = [
    {
        name:"123",
        number:123,
        allowDelete:true,
    },
    {
        name:"456",
        number:456,
        allowDelete:false,
    }
]

然后在slot里，<button v-show="scope.row.allowDelete">刪除</button>

2018年8月20日 18:44