Vue+Element-UI表格模板(初学)

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/elementui.css">
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
</head>
<body>
<div id="app">
<el-form :inline="true">
    <el-form-item label="品牌名">
         <el-input v-model="map.name" placeholder="品牌名称"></el-input>
    </el-form-item>
    <el-form-item label="品牌首字母">
        <el-input v-model="map.letter"  placeholder="品牌首字母"></el-input>
    </el-form-item>
    <el-button type="primary" @click="fetchData()">查询</el-button>
    <el-button type="primary" @click="brand={}, formVisible = true">新增</el-button>  <!--防止点击修改后点击新增按钮把修改的数据带过来  -->
</el-form>

<el-table
        :data="tableData"
        stripe
        style="width: 100%">
    <el-table-column
            prop="id"
            label="ID"
            width="180">
    </el-table-column>
    <el-table-column
            prop="letter"
            label="首字母"
            width="180">
    </el-table-column>
    <el-table-column
            prop="name"
            label="名称"
            width="180">
    </el-table-column>
    <el-table-column
            label="图片"
            width="180">
        <template slot-scope="scope">
            <img width="100px" height="30px" :src="scope.row.image">
        </template>
    </el-table-column>
    <el-table-column
            label="操作">
       <template slot-scope="scope">
           <el-button @click="edit(scope.row.id)" type="text" size="small">修改</el-button>  <!-- type="text"文字样式按钮 ,size="small"按钮更小-->
           <el-button @click="del(scope.row.id)" type="text" size="small">删除</el-button>
       </template>
    </el-table-column>

</el-table>

<div class="block">
<el-pagination
        @size-change="fetchData"
        @current-change="fetchData"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
</el-pagination>
</div>
<!--弹出窗口-->
<el-dialog title="品牌编辑" :visible.sync="formVisible">
    <el-form>
        <el-form-item label="品牌名称">
            <el-input placeholder="品牌名称" v-model="brand.name"></el-input>
        </el-form-item>
        <el-form-item label="品牌首字母">
            <el-input placeholder="品牌首字母" v-model="brand.letter"></el-input>
        </el-form-item>
        <el-form-item label="品牌图片">
            <!--element-ui 文件上传-->
          <el-upload
              class="avatar-uploader"
              action="/upload/native.do"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforAvatarUpload">
              <!--  :before-upload="beforAvatarUpload"文件上传前做什么, function(file) ,通常做判断文件类型或大小-->
              <!-- :show-file-list="false"是否显示已经上传的文件列表  -->
              <!-- :on-success="handleAvatarSuccess"文件上传成功的做什么, function(response,file,fileList)  -->
           <img v-if="imageUrl"   :src="imageUrl" class="avatar" > <!--  v-if图片是否存在--> <!-- :src 绑定变量imageUrl,data中定义-->
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="排序">
            <el-input placeholder="排序" v-model="brand.seq"></el-input>
        </el-form-item>
    </el-form>
    <el-button type="primary" @click="formVisible = false">关闭</el-button>
    <el-button type="primary" @click="save()">保存</el-button>
</el-dialog>
</div>
</body>

<script src="../js/vue.js"></script>
<script src="../js/elementui.js"></script>
<script src="../js/axios.js"></script>

<script>
new Vue({
    el:"#app",
    data(){
       return{
           tableData:[],
           size:10,
           total:10,
           currentPage:1,
           map:{},
           formVisible:false,
           brand:{},
           imageUrl:""
       }

    },
    created(){
        this.fetchData();
    },
    methods:{
        fetchData() {
            axios.post(`/brand/findBysearch.do?page=${this.currentPage}&size=${this.size}`, this.map).then(response => {
                this.tableData = response.data.rows;
            this.total = response.data.total;
             });
                   },
         save(){
             this.brand.image=this.imageURL;  //编辑窗口属性绑定到brand
            axios.post(`/brand/${this.brand.id==null?'add':'update'}.do`,this.brand).then(response =>{//三元运算符,判断有id执行updata方法,没有则执行add方法
               this.formVisible=false;//关闭窗口
              // alert(JSON.stringify(response.data));
             this.fetchData();//刷新列表
            })
         },
        edit(id){
            this.formVisible=true;//显示编辑弹窗
            axios.get(`/brand/findById.do?id=${id}`).then(response =>{  //根据id查找数据,并把数据回显
                this.brand=response.data.data;
                this.imageUrl=this.brand.image;
                //alert( JSON.stringify(response.data.data));
            })
        },
        del(id){
            //MessageBox弹窗
            this.$confirm('确定删除此纪录吗?','提示标题',{
               confirmButtonText:"确定",
                cancelButtonText:"取消",
                type:'warning'
            }).then(()=>{
                axios.delete(`/brand/delete.do?id=${id}`).then(response=>{
                    if(response.data.code==0)
                    {
                        this.$alert("删除成功","提示");
                        this.fetchData();
                    }else
                        this.$alert("删除失败","提示");
                })
            })
        },
        handleAvatarSuccess(res,file){
            this.imageUrl=file.response;//上传返回的地址
        },
        beforAvatarUpload(file){
            const isJPG=file.type==='image/jpeg';
            const isLt2M=file.size /1024/1024<2;
            if(!isJPG){
                this.$message.error('上传头像只能是JPG格式');
            }if(!isLt2M){
                this.$message.error('上传头像图片大小不能超过2MB');
            }
            return isJPG && isLt2M;  //将值return回去,只有当两值为true是才继续执行下去
        }
        }
});
</script>

</html>
Last modification:November 4th, 2019 at 06:27 pm

Leave a Comment