在做后台管理系统中遇到一个需求，点击一个按钮可以变换里面字的内容

当状态为显示的时候，该行第一个按钮为隐藏；

当状态为隐藏的时候，该行第一个按钮为显示；

具体代码如下：

！-数据表格-El-table : data=' table data ' class=' table '条纹边框v-loading=' loading ' El-table-column类型=' index ' label='序号宽度=' 70 '/El-table-column El-table-column prop=' status '标签='状态/El-表格-列El-表格-列标签='操作模板槽-作用域=' scope ' El-button size=' mini ' type=' warning ' @ click=' handleIsDisplay(作用域$index，scope。行)' { {作用域。划船。状态=='显示？'隐藏':'显示} }/El-button El-button size=' mini ' type=' primary ' @ click=' handleEdit(作用域$index，scope.row)编辑/El-按钮！-El-button size=' mini ' type=' danger ' @ click=' handleRemove(作用域$index，scope.row)删除/El-button//template/El-table-column/El-table也可以用第二种方法：

！-数据表格-El-table : data=' table data ' class=' table '条纹边框v-loading=' loading ' El-table-column类型=' index ' label='序号宽度=' 70 '/El-table-column El-table-column prop=' status '标签='状态/El-表格-列El-表格-列标签='操作模板槽-范围='范围el-button v-if='范围。row.status=='显示size=' mini ' type=' warning ' @ click=' handleIsDisplay(作用域$index，scope.row)隐藏/El-button El-button v-if=' scope。划船。状态=='隐藏size=' mini ' type=' warning ' @ click=' handleIsDisplay(作用域$index，scope.row)显示/El-button El-button size=' mini ' type=' primary ' @ click=' handleEdit(作用域$index，scope.row)编辑/El-按钮！-El-button size=' mini ' type=' danger ' @ click=' handleRemove(作用域$index，scope.row)删除/El-button//template/El-table-column/El-table总结

以上所述是小编给大家介绍的elementUI Vue单个按钮显示和隐藏的变换功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！