介绍
之前做的用户列表功能,抽出来了删除,新增,编辑等功能,可直接使用。
效果图
实例
<template>
<div class='useradd height'>
<div class='btnDiv'>
<el-button @click="addAll" icon='el-icon-plus' size='mini' type="primary">新增</el-button>
<el-button @click="editAll" icon='el-icon-edit' size='mini' type="success">批量编辑</el-button>
<el-button @click="delectAll" icon='el-icon-edit' size='mini' type='danger'>批量删除</el-button>
</div>
<el-table :data="tabledatas" stripe border @selection-change="handleSelectionChange" :default-sort = "{prop: 'name', order: 'descending'}" size='small' :header-cell-style="{background:'#EFF3F8',color:'#606266'}">
<el-table-column type="selection"></el-table-column>
<el-table-column label="用户名称" sortable prop="name">
<template slot-scope="scope">
<span v-if="scope.row.show">
<el-input size="mini" placeholder="请输入内容" v-model="scope.row.name"></el-input>
</span>
<span v-else>{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column label="用户性别">
<template slot-scope="scope">
<span v-if="scope.row.show">
<el-input size="mini" placeholder="请输入内容" v-model="scope.row.sex"></el-input>
</span>
<span v-else>{{scope.row.sex}}</span>
</template>
</el-table-column>
<el-table-column label="手机号码">
<template slot-scope="scope">
<span v-if="scope.row.show">
<el-input size="mini" placeholder="请输入内容" v-model="scope.row.phone"></el-input>
</span>
<span v-else>{{scope.row.phone}}</span>
</template>
</el-table-column>
<el-table-column label="创建时间" sortable prop="date">
<template slot-scope="scope">
<span v-if="scope.row.show">
<el-input size="mini" placeholder="请输入内容" v-model="scope.row.date"></el-input>
</span>
<span v-else>{{scope.row.date}}</span>
</template>
</el-table-column>
<el-table-column label="角色状态">
<template slot-scope="scope">
<el-switch v-model="scope.row.status" @change=change(scope.$index,scope.row)></el-switch>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size='mini' type="text" @click="edit(scope.row,scope.$index)">{{scope.row.show?'保存':"编辑"}}</el-button>
<el-button size='mini' type="text" @click="delect(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import Vue from 'vue'
export default {
data() {
return {
tabledatas: [
{ name: '小明', sex: '男' ,show:false,status:false,date:'2020-05-30',phone:15000000000},
{ name: '小红', sex: '女' ,show:false,status:true,date:'2020-05-28',phone:18317773787},
{ name: '5', sex: '女' ,show:false,status:true,date:'2020-05-20',phone:18317773782},
],
multipleSelection: [],
}
},
methods: {
edit(row, index) {
row.show = row.show ? false : true;
console.log(index)
this.tabledatas[index]=row
//Vue.set(this.tabledatas, index, row)
// 修改后保存
},
editAll() {
this.tabledatas.map((i, index) => {
i.show = true
Vue.set(this.tabledatas, index, i)
})
},
// 单个复制
cope(val, index) {
this.tabledatas.splice(index, 0,JSON.parse(JSON.stringify(val)))
},
// 单个删除
delect(index) {
this.tabledatas.splice(index, 1)
},
//新增
addAll() {
this.$router.push({path: '/user/add'});
},
//批量删除
delectAll() {
for (let i = 0; i < this.tabledatas.length; i++) {
const element = this.tabledatas[i];
element.id = i
}
if (this.multipleSelection.length == 0) this.$message.error('请先至少选择一项')
this.multipleSelection.forEach(element => {
this.tabledatas.forEach((e, i) => {
if (element.id == e.id) {
this.tabledatas.splice(i, 1)
}
});
});
},
//选
handleSelectionChange(val) {
this.multipleSelection = val;
},
change:function(index,row){
console.log(index,row);
},
}
}
</script>
<style scoped lang="less">
.useradd{
padding:20px;
box-sizing: border-box;
background-color: #fff
}
.btnDiv{
margin-bottom: 20px;
}
</style>