idea和vue项目中的列表的展示
列表的体现
<!--全选配置-->
<el-table-column type="selection"></el-table-column>
<el-table-column label="序号" prop="id"></el-table-column>
<!-- 头像 -->
<el-table-column label="头像">
<template slot-scope="scope">
<el-avatar :src="scope.row.userface"></el-avatar>
</template>
</el-table-column>
<!--登录名-->
<el-table-column label="登录名" prop="username"></el-table-column>
<!-- 性别 -->
<el-table-column label="性别">
<template slot-scope="scope">
<span v-if="scope.row.sex==1">男</span>
<span v-if="scope.row.sex==0">女</span>
</template>
</el-table-column>
<!-- 手机号 -->
<el-table-column label="手机号">
<template slot-scope="scope">
<i class="el-icon-phone"></i>
<span>{{scope.row.phone}}</span>
</template>
</el-table-column>
<!--角色-->
<el-table-column label="拥有角色" prop="nameZhs"></el-table-column>
<!--省市县-->
<el-table-column label="省市区">
<template slot-scope="scope">
{{scope.row.provinceName}}-{{scope.row.cityName}}-{{scope.row.districtName}}
</template>
</el-table-column>
<!-- 操作 -->
<el-table-column label="操作" width="300">
<template slot-scope="scope">
<el-button type="danger" size="small" @click="openRoleDialog(scope.row)">授权</el-button>
<el-button type="warning" size="small" @click="openEditDialog(scope.row)">修改</el-button>
<el-button type="primary" size="small">详情</el-button>
<el-button type="success" size="small" icon="el-icon-search" @click="deleteUser">删除</el-button>
</template>
</el-table-column>
</el-table>
分页的列表显示
<!-- 分页 -->
<el-row>
<el-col :span="24">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total" :current-page="current"
:page-sizes="sizes" :page-size="size" layout="total, sizes, prev, pager, next, jumper" background>
</el-pagination>
</el-col>
</el-row>
数据的展示
export default {
data() {
var checkPhone = (rule, value, callback) => {
if (!/^13[3456789]\d{8}$/.test(value)) {
callback(new Error('手机号码有误，请重新填写'))
}
callback();
}
return {
total: 0,
size: 3,
sizes: [3, 5, 8],
current: 1,
tableData: [],
searchFormModel: {
username: '',
phone: '',
sex: '',
},
//性别的判断
options: [{
value: 0,
label: '女'
}, {
value: 1,
label: '男'
}],
insertUserDialog: false,
imageUrl: '', //上传的头像路径
}
},
查找的框
<el-row>
<el-col :span="16">
<el-form :model="searchFormModel" inline>
<el-form-item label="登录名">
<el-input v-model="searchFormModel.username" placeholder="请输入登录名"></el-input>
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="searchFormModel.phone" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="searchFormModel.sex" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="success" icon="el-icon-search" @click="searchUser">搜索</el-button>
</el-form-item>
</el-form>
</el-col>
<el-col :span="5">
<el-button type="success" icon="el-icon-search" @click="insertUserDialog=true">添加</el-button>
<el-button type="success" icon="el-icon-search" @click="deleteUser">批删</el-button>
</el-col>
</el-row>
进行添加的数据展示
<!-- 添加用户的对话框 -->
<el-dialog :visible="insertUserDialog" title="添加用户" width="60%" center>
<el-form :model="insertFormModel" :rules="insertRules" ref="insertRuleForm" label-width="80px">
<el-form-item label="登录名称" prop="username">
<el-input v-model="insertFormModel.username" placeholder="请输入登录名称"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="insertFormModel.phone" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-radio v-model="insertFormModel.sex" label="1" border>男</el-radio>
<el-radio v-model="insertFormModel.sex" label="0" border>女</el-radio>
</el-form-item>
<el-form-item label="头像">
<!--action 上传的地址 name的名称默认是file 就是上传到控制层的参数名称-->
<!--on-success 成功/before-uploud 上传前处理是上传组件的钩子函数-->
<el-upload class="avatar-uploader" :show-file-list="false" name="file" action="http://localhost:81/upload"
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
<!--img 是用来显示上传图片的本地效果-->
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="省市区">
<el-cascader v-model="value" :options="nations" :props="props" @change="flushpc">
</el-cascader>
</el-form-item>
<el-form-item>
<el-button type="success" @click="saveUser">保存</el-button>
<el-button type="success" @click="closeUser">关闭</el-button>
</el-form-item>
</el-form>
</el-dialog>
三级联动的实现
授权的实现
修改的回显，，以及修改的实现
删除的代码的实现
关于另一个表的增改查，无三级联动，有图片上传
