html

  <div>
    
      新增
      编辑
      删除
    
  </div>
</p>


export default {
  methods: {
    handleAdd() {
      console.log('新增');
    },
    handleEdit() {
      console.log('编辑');
    },
    handleDelete() {
      console.log('删除');
    }
  }
}


<p>

html

  <div>
    <!-- 工具栏 -->
    
      
        
          新增
          编辑
          删除
        
      
      
        
      
    </p>

<pre><code><!-- 表格 -->
<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

export default {
data() {
return {
searchText: '',
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区江路 1517 弄'
}]
}
},
methods: {
handleAdd() { /* ... */ },
handleEdit() { /* ... */ },
handleDelete() { /* ... */ }
}
}

动态生成Toolbar按钮

如果需要根据权限或配置动态生成 Toolbar 按钮，可以通过遍历数组的方式实现：

html

  
    
      {{ item.label }}
    
  
</p>


export default {
  data() {
    return {
      buttons: [
        { label: '新增', icon: 'el-icon-plus', action: 'add' },
        { label: '编辑', icon: 'el-icon-edit', action: 'edit' },
        { label: '删除', icon: 'el-icon-delete', action: 'delete' }
      ]
    }
  },
  methods: {
    handleClick(action) {
      switch(action) {
        case 'add': this.handleAdd(); break;
        case 'edit': this.handleEdit(); break;
        case 'delete': this.handleDelete(); break;
      }
    },
    handleAdd() { /* ... */ },
    handleEdit() { /* ... */ },
    handleDelete() { /* ... */ }
  }
}


<p>

以上就是关于 Element UI Toolbar 的几种常见使用方法，可以根据实际需求选择合适的方式来实现。希望这些示例能帮助您更好地理解和使用 Element UI 的 Toolbar 功能。

(牛站网络)