export const getRoleEdit = params => put（ '/ api-user /ロール'、params）;
export const getRole =（params）=> get（ `/ api-user / listRoles？pageNum = $ {params.pageNum} && pageSize = $ {params.pageSize} && name = $ {params.name}`）;
<テンプレート>
<div class = "content_bg">
<div class = "content">
<el-form：inline = "true"：model = "formInline" class = "demo-form-inline">
<el-form-item label = "キャラクター名：">
<el-input v-model = "formInline.user" placeholder = "角色名"> </ el-input>
</ el-form-item>
<el-form-item>
<el-button type = "primary" icon = "el-icon-search" @ click = "handerSearch">搜索</ el-button>
</ el-form-item>
<el-form-item style = "float：right">
<el-button type = "primary" icon = "el-icon-circle-plus-outline" @ click = "handerAdd">ボタン</ el-button>
</ el-form-item>
</ el-form>
<el-table：data = "tableData" border style = "width：100％" row-key = "id">
<el-table-column prop = "code" label = "code" align = "center"> </ el-table-column>
<el-table-column prop = "name" label = "角色名" align = "center"> </ el-table-column>
<el-table-column prop = "updateTime" label = "修改時間" align = "center"> </ el-table-column>
<el-table-column fixed = "right" label = "操作" width = "300" align = "center">
<template slot-scope = "scope">
<el-button @ click = "handleEdit（scope.row）" type = "primary" size = "small"：disabled = "scope.row.id == 1"> <i class = "el-icon-edit" > </ i> </ el-ボタン>
<el-button @ click = "handleDelete（scope.row）" type = "primary" size = "small"：disabled = "scope.row.id == 1"> <i class = "el-icon-delete" > </ i> </ el-ボタン>
<el-button type = "primary" size = "small"：disabled = "scope.row.id == 1">一票の格差</ el-button>
</ template>
</ el-table-column>
</ el-table>
<div style = "margin-top：30px; float：right;">
<el-pagination
@ size-change = "handleSizeChange"
@ current-change = "handleCurrentChange"
現在のページ= "pageno"
：page-sizes = "[1、2、30、40]"
：page-size = "pageSize"
layout = "total、sizes、prev、pager、next、jumper"
：total = "total">
</ el-ページネーション>
</ div>
</ div>
<el-dialog：title = "flagName？ '追加'： '编辑'"：visible.sync = "centerDialogVisible" width = "50％" center>
<el-form label-position = "top" label-width = "80px"：model = "formLabelAlign">
<el-form-item label = "code（不可修改）" v-if = "flagName">
<el-input v-model = "formLabelAlign.code"> </ el-input>
</ el-form-item>
<el-form-item label = "code" v-else>
<el-input v-model = "formLabelAlign.code"が無効> </ el-input>
</ el-form-item>
<el-form-item label = "角色">
<el-input v-model = "formLabelAlign.name"> </ el-input>
</ el-form-item>
</ el-form>
<span slot = "footer" class = "dialog-footer">
<el-button @ click = "centerDialogVisible = false">戻る回</ el-button>
<el-button type = "primary" @ click = "handerAddSave" v-if = "flagName">購入</ el-button>
<el-button type = "primary" @ click = "handerEditSave" v-else>購入</ el-button>
</ span>
</ el-dialog>
</ div>
</ template>
<スクリプト>
import {getRole、getRoleEdit、getRoleAdd、getRoleDelete} from '@ / api / index';
デフォルトのエクスポート{
メソッド：{
handleClick（row）{
console.log（row）;
}
}、
data（）{
戻り値{
ページ番号：1;
pageSize：10、
合計：0、
formInline：{
ユーザー： ''
}、
flagName：false、
centerDialogVisible：false、
formLabelAlign：{
名前： ''、
コード： ''
}、
tableData：[]
};
}、
作成した（） {
this.getRoleList（{}）;
}、
メソッド：{
handleSizeChange（val）{
console.log（ `$ {val} per page`）;
this.pageSize = val;
this.getRoleList（）;
}、
handleCurrentChange（val）{
console.log（ `現在のページ：$ {val}`）;
this.pageNum = val;
this.getRoleList（）;
}、
//お問い合わせ
getRoleList（）{
params = {
pageno：this.pageNum;
pageSize：this.pageSize、
名前：this.formInline.user
}
getRole（params）.then（res => {
if（res.status == 200）{
this.tableData = res.data.data.list;
this.total = res.data.data.total;
this.pageNum = res.data.data.pageNum;
this.pageSize = res.data.data.pageSize;
}
}）;
}、
// 検索する
handerSearch（）{
this.getRoleList（this.formInline.name）;
}、
// 追加
handerAdd（）{
this.formLabelAlign = {};
this.flagName = true;
this.centerDialogVisible = true;
}、
//編集
handleEdit（row）{
console.log（111、行）;
this.flagName = false;
this.centerDialogVisible = true;
this.formLabelAlign = row;
}、
//保存を追加
handerAddSave（）{
getRoleAdd（this.formLabelAlign）.then（res => {
this.centerDialogVisible = false;
this.getRoleList（）;
this。$ message.success（ '正常に追加されました'）;
}）;
}、
//編集して保存
handerEditSave（）{
getRoleEdit（this.formLabelAlign）.then（res => {
this.centerDialogVisible = false;
this.getRoleList（）;
this。$ message.success（ '変更に成功しました'）;
}）;
}、
handleDelete（row）{
this。$ confirm（ '削除してもよろしいですか？'、 '情報'、{
ConfirmButtonText： 'OK'、
cancelButtonText： 'キャンセル'、
タイプ： '警告'
}）
.then（（）=> {
getRoleDelete（row.id）.then（res => {
this.getRoleList（）;
this。$ message（{
タイプ： '成功'、
メッセージ：「正常に削除してください！」
}）;
}）;
}）
.catch（（）=> {
this。$ message（{
タイプ： '情報'、
メッセージ：「削除されましたキャンセルされました」
}）;
}）;
}
}
};
</ script>
<style lang = "less"スコープ> </ style>