vue+elementsuiは、一つのボックスを共有する完全なコードの追加と修正を実現します。
9853 ワード
element-uiはお腹が空いていますか？フロントエンドチームが開発者、デザイナー、製品マネージャーのために用意したVue.js 2.0ベースのデスクトップコンポーネントライブラリです。携帯端末には対応フレームがMint UIです。全体のuiスタイルはシンプルで実用的で、開発者の効率も大幅に向上しています。
一、新規
1、追加ボタン
2、新しいイベントはmethodsにおいて、弾戸を開けるために使用されます。
dialogVisibleはdataでtrueまたはfalseを使用して表示ボックスを制御すると定義されています。
＊＊3、新規に確定し、弾倉はイベントを確定し、新たに一つの確定イベントを共有し、idを使用して区別する。
**3、新規イベント
インターフェースを追加して、IDがあるかどうかを判断します。ない場合はインターフェースを追加します。
二、修正
2-1、変更ボタン、表行編集ボタンはscope.rowを使って現在の行のデータを取得する
2-2、イベントを変更し、現在の行のデータをフォームに割り当てて、現在の行のデータを返します。
2-3、イベントの修正
インターフェースを修正して、IDがあるかどうかを判断し、インターフェースを修正します。
下に直接コードを入れます。
一、新規
1、追加ボタン
2、新しいイベントはmethodsにおいて、弾戸を開けるために使用されます。
dialogVisibleはdataでtrueまたはfalseを使用して表示ボックスを制御すると定義されています。
＊＊3、新規に確定し、弾倉はイベントを確定し、新たに一つの確定イベントを共有し、idを使用して区別する。
**3、新規イベント
インターフェースを追加して、IDがあるかどうかを判断します。ない場合はインターフェースを追加します。
二、修正
2-1、変更ボタン、表行編集ボタンはscope.rowを使って現在の行のデータを取得する
2-2、イベントを変更し、現在の行のデータをフォームに割り当てて、現在の行のデータを返します。
2-3、イベントの修正
インターフェースを修正して、IDがあるかどうかを判断し、インターフェースを修正します。
下に直接コードを入れます。
<template>
<div>
<!-- -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/Welcome' }"> </el-breadcrumb-item>
<el-breadcrumb-item> </el-breadcrumb-item>
<el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb>
<!-- -->
<el-card class="box-card">
<!-- -->
<el-row :gutter="20">
<el-col :span="6">
<div class="grid-content bg-purple"></div>
<el-button type="primary" @click="onhandAdd"> </el-button>
</el-col>
</el-row>
<!-- -->
<el-table :data="tableData" border="" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="scope">
<el-row
:class="['bdbottom',i1 === 0? 'bdtop' : '', 'vcenter'] "
:gutter="20"
:span="6"
v-for="(item_ong,i1) in scope.row.children"
:key="item_ong.id"
>
<!-- -->
<el-col :span="5">
<el-tag>{{item_ong.authName}}</el-tag>
<i class="el-icon-caret-right"></i>
</el-col>
<!-- -->
<el-col :span="19">
<!-- -->
<el-row v-for="(item_two,i2) in item_ong.children" :key="i2">
<el-col :span="6">
<el-tag type="success">{{item_two.authName}}</el-tag>
<i class="el-icon-caret-right"></i>
</el-col>
<el-col :span="18">
<el-tag
type="warning"
v-for="(item_three,i3) in item_two.children"
:key="i3"
>{{item_three.authName}}</el-tag>
<i class="el-icon-caret-right"></i>
</el-col>
</el-row>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column label="#" type="index" width="80"></el-table-column>
<el-table-column label=" " prop="roleName"></el-table-column>
<el-table-column label=" " prop="roleDesc"></el-table-column>
<el-table-column label=" " prop="id">
<template slot-scope="scope">
<el-button
type="primary"
icon="el-icon-edit"
size="small"
@click="handleEdit(scope.$index, scope.row)"
> </el-button>
<el-button type="warning" icon="el-icon-delete" size="small"> </el-button>
<el-button type="danger" icon="el-icon-edit" size="small"> </el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- -->
<el-dialog
:title="addtitle"
:visible.sync="dialogVisible"
width="40%"
:before-close="handleClose"
>
<el-form
:model="ruleForm"
:rules="rules"
ref="refRuleForm"
label-width="100px"
class="demo-ruleForm"
>
<el-form-item label=" " prop="roleName">
<el-input v-model="ruleForm.roleName"></el-input>
</el-form-item>
<el-form-item label=" " prop="roleDesc">
<el-input v-model="ruleForm.roleDesc"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" @click="dialogVisibleConfirm"> </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
dialogVisible: false,
addtitle: " ",
ruleForm: {
roleName: "",
roleDesc: ""
},
allid: "",
//
rules: {
roleName: [
{ required: true, message: " ", trigger: "blur" },
{ min: 3, max: 5, message: " 3 5 ", trigger: "blur" }
],
roleDesc: [{ required: true, message: " ", trigger: "blur" }]
}
};
},
created() {
this.tabList();
},
methods: {
//
tabList() {
this.$api.jurisdiction.rolelist().then(res => {
console.log(res.data.data, "]]]]]]]");
this.tableData = res.data.data;
});
},
//
onhandAdd() {
this.dialogVisible = true;
},
handleClose(done) {
this.dialogVisible = false;
},
//
handleEdit(index, row) {
console.log(index, row.id);
this.dialogVisible = true; //
this.ruleForm = row; //row ，
this.allid = row.id; // id
},
//
dialogVisibleConfirm() {
//
if (!this.allid) {
this.$api.jurisdiction.addrole(this.ruleForm)
.then(res => {
// console.log(res," ")
this.$message.success(" "); //
this.$refs.refRuleForm.resetFields(); //
this.dialogVisible = false; //
this.tabList(); //
})
.catch(res => {
this.$message.error(" ");
});
} else {
//
let id = this.allid
let params = {
roleName:this.ruleForm.roleName,
roleDesc:this.ruleForm.roleDesc,
}
this.$api.jurisdiction.edtrole(id,params)
.then(res => {
console.log(res," ")
this.$message.success(" ");
this.$refs.refRuleForm.resetFields();
this.dialogVisible = false;
this.tabList();
})
.catch(res => {
this.$message.error(" ");
});
}
}
}
};
</script>
<style scoped>
.bdtop {
border-top: 1px solid #eee;
padding-top: 10px;
}
.bdbottom {
border-bottom: 1px solid #eee;
padding-bottom: 10px;
padding-top: 10px;
}
.el-tag {
margin: 10px 0px;
}
.vcenter {
display: flex;
align-items: center;
}
</style>