首頁(yè) 猿問(wèn) ...

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

Vue.js

喵喵時(shí)光機(jī) 2018-08-23 17:03:55

如圖：想把前兩個(gè)刪除按鈕隱藏，但是最后一個(gè)不隱藏，頁(yè)面結(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>

查看完整描述

1 回答

慕俠2389804

TA貢獻(xiàn)1719條經(jīng)驗(yàn) 獲得超6個(gè)贊

這個(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>

反對(duì) 回復(fù) 2018-08-26