The requirement is a custom way to add data to the table header. Binding the @Click event directly with the table-column doesn’t work, and even if it works, it’s not beautiful. Try to make the table header an add button
Query the document, found a very interesting property —
Successfully implemented after a few attempts
<el-table-column label="Operate" width="80" align="center" > <template slot="header"> // <el-button icon="el-icon-plus" circle @click="openAdd" /> </template> <template slot-scope="scope"> <el-button type="primary" Size ="mini" @Click ="handleEdit(scope.row.id)" > Edit </el-button> <br> <el-button type="info" size="mini" @click="handleDelete(scope.row.id)" > </el-button> </template> </el-table-column>The effect is as follows:
