How does element hide a button in a column?

as shown in the picture: I want to hide the first two delete buttons, but the last one is not hidden. How to write the page structure as follows?

      <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


the display and concealment of this button is also directly bound in the data. On the button, use vmurshow = "scope.row.allowDelete to control

. < hr >

add:

your form data should have a similar structure

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

you can add it to

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

then in slot, < button vshow = "scope.row.allowDelete" > delete < / button >

Menu