用vue写一个页面，用element-ui实现一个表格，左上角放一个"添加权限”按钮，按钮大小稍微小点。表格有4列，分别是:名称、标识、描述、操作，操作这一列有三个文本按钮，分别是:添加、编辑、删除。随机渲染5行表格数据。不用分页

<template>
<div>
<el-button size="mini" @click="handleAddPermission">添加权限</el-button>
<el-table :data="tableData">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="id" label="标识"></el-table-column>
<el-table-column prop="description" label="描述"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="handleAdd(scope.$index)">添加</el-button>
<el-button size="mini" @click="handleEdit(scope.$index)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>

<script>
import { mapGetters } from 'vuex';
import { generateRandomTableData } from '@/utils';

export default {
data() {
return {
tableData: [],
};
},
computed: {
...mapGetters(['permissions']),
},
created() {
this.tableData = generateRandomTableData(5, this.permissions);
},
methods: {
handleAddPermission() {
// TODO: 添加权限
},
handleAdd(index) {
// TODO: 添加操作
},
handleEdit(index) {
// TODO: 编辑操作
},
handleDelete(index) {
// TODO: 删除操作
},
},
};
</script>