ElementUI+VUE案例，demo

125 阅读 0 评论 83 点赞
我是靠谱客的博主彩色夏天，这篇文章主要介绍ElementUI+VUE案例，demo，现在分享给大家，希望可以做个参考。
<template>
  <div id="app" style="margin-top: 20px;" v-cloak>
    <el-col>
      <el-form ref="form" :model="form" label-width="100px" :inline="true">
        <el-form-item label="阿啊实打实达">
          <el-input v-model="form.md_typeName" size="mini" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="发大股东非">
          <el-input v-model="form.md_typeName" size="mini" maxlength="20"></el-input>
        </el-form-item>
        <el-button style="margin-left: 20px" type="primary"  @click="search" icon="el-icon-search">查询</el-button>
        <el-button type="danger" @click="showAddDialog" icon="el-icon-plus">添加</el-button>
      </el-form>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        &lt;!&ndash; <el-table-column type="selection" ></el-table-column>&ndash;&gt;
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="id" label="胜多负少的"  show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="b" label="阿达" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="c" label="胜多负少" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="d" label="苟富贵" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="e" label="二维" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="f" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button  type="primary" size="mini" @click="showEditDialog(scope.row.id)">编辑</el-button>
            <el-button  type="warning" size="mini" @click="deleteInfo(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[2, 4, 8, 10]" :page-size="2" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </el-col>

    <el-dialog
      title="修改"
      :visible.sync="EditdialogVisible"
      width="60%" >
      <el-form :model="eidtForm"  :ref="eidtFormRef" label-width="70px" class="demo-ruleForm">
        <el-form-item label="地方">
          <el-input v-model="eidtForm.id"></el-input>
        </el-form-item>
        <el-form-item label="阿达">
          <el-input v-model="eidtForm.b"></el-input>
        </el-form-item>
        <el-form-item label="地方">
          <el-input v-model="eidtForm.c"></el-input>
        </el-form-item>
        <el-form-item label="胜多负少">
          <el-input v-model="eidtForm.d"></el-input>
        </el-form-item>
        <el-form-item label="给对方" >
          <el-input v-model="eidtForm.e"></el-input>
        </el-form-item>
        <el-form-item label="二维">
          <el-input v-model="eidtForm.f"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button @click="EditCanel">取 消</el-button>
         <el-button type="primary" @click="EditInfo">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="添加"
      :visible.sync="AddDialogVisible"
      width="60%" >
      <el-form :model="addForm"  :ref="addForm" label-width="70px" class="demo-ruleForm">
        <el-form-item label="规划局">
          <el-input v-model="addForm.id"></el-input>
        </el-form-item>
        <el-form-item label="都是废话">
          <el-input v-model="addForm.b"></el-input>
        </el-form-item>
        <el-form-item label="关乎">
          <el-input v-model="addForm.c"></el-input>
        </el-form-item>
        <el-form-item label="师范">
          <el-input v-model="addForm.d"></el-input>
        </el-form-item>
        <el-form-item label="返回" >
          <el-input v-model="addForm.e"></el-input>
        </el-form-item>
        <el-form-item label="发过火">
          <el-input v-model="addForm.f"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button @click="AddCanel">取 消</el-button>
         <el-button type="primary" @click="addinfo">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    name: "index",
    data: function() {
      return {
        total: 3,
        showDiv: false,
        EditdialogVisible:false,
        AddDialogVisible:false,
        form: {
          md_typeId: '',
          md_typeName: '',
          md_ptName:'',
          pageSize: 2,
          pageIndex: 1
        },
        addForm:{},
        eidtForm:{
          id: '1111111',
          b: '王小虎',
          c: '上海市普陀区金沙江路 1518 弄',
          d:2,
          e:3,
          f:4
        },
        tableData: [{
          id: '1111111',
          b: '王小虎',
          c: '上海市普陀区金沙江路 1518 弄',
          d:2,
          e:3,
          f:4
        }, {
          id: '22222222',
          b: '王小虎',
          c: '上海市普陀区金沙江路 1518 弄',
          d:2,
          e:3,
          f:4
        }, {
          id: '333333',
          b: '王小虎',
          c: '上海市普陀区金沙江路 1518 弄',
          d:2,
          e:3,
          f:4
        }],
        multipleSelection: [],
        currentPage: 1,
        loading: false,
        message:''
      }
    },
    mounted: function() {
      //初始化
      this.search();
    },
    methods: {
      handleSelectionChange: function(val) {
        this.multipleSelection = val;
      },
      handleSizeChange: function(val) {
        this.form.pageSize = val;
        this.search();
      },
      handleCurrentChange: function(val) {
        this.form.pageIndex = val;
        this.search();
      },

      showEditDialog(id){
        this.EditdialogVisible=true;
        getObj(id)
          .then(response => {
            this.eidtForm = response.data;
          })
      },

      EditCanel(eidtForm){
        this.EditdialogVisible=false;
        this.$refs[eidtForm].resetFields();
      },

      EditInfo(){
        //关闭对话框  之后写里面
        this.EditdialogVisible=false;
        putObj(this.eidtForm.id,this.eidtForm)
          .then(response => {
            this.message = response.bodyText;
            //提示成功
            this.$message({
              showClose: true,
              message: this.message,
              type: 'success'
            });
            // 刷新页面
            this.search();
          })
      },

      deleteInfo(id){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delObj(id)
            .then(() => {
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000
              });
            });
        });
      },

      showAddDialog(){
        this.AddDialogVisible=true;
      },

      addinfo(){
        const set = this.$refs;
        set[addForm].validate(valid => {
          if (valid) {
            addObj(this.addForm)
              .then(() => {
                this.AddDialogVisible = false;
                this.getList();
                this.$notify({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                });
              })
          } else {
            return false;
          }
        });
      },
      AddCanel(){
        this.AddDialogVisible=false;
        this.$refs[addForm].resetFields();
      },

      search(){
        var vm = this;
        vm.loading=true;
        vm.$http.post(path + '/soft_TypeList', encrypt(vm.form)).then(function(response) {
          var objData = decrypt(response.bodyText);
          vm.tableData = objData.result.list;
          /* vm.total = objData.result.total*/
          vm.loading = false;
        }, function(response) {
          vm.loading = false;
          this.$message({
            showClose: true,
            message: '获取信息查询失败',
            type: 'error'
          });
        });
      }
    }
  }
</script>

<style scoped>
  html{
    background: #ffffff;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  .el-table th {
    background-color: #f0f0f0;
  }
  .el-table thead {
    color: #4f4f4f;
  }
  .el-pagination{
    text-align: center;
  }


</style>