devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

ElementUI+VUE案例，demo_vue element ui demo

作者：羊村懒王 | 2024-03-24 05:08:47

赞

踩

vue element ui demo
  1. <template>
  2.   <div id="app" style="margin-top: 20px;" v-cloak>
  3.     <el-col>
  4.       <el-form ref="form" :model="form" label-width="100px" :inline="true">
  5.         <el-form-item label="阿啊实打实达">
  6.           <el-input v-model="form.md_typeName" size="mini" maxlength="20"></el-input>
  7.         </el-form-item>
  8.         <el-form-item label="发大股东非">
  9.           <el-input v-model="form.md_typeName" size="mini" maxlength="20"></el-input>
  10.         </el-form-item>
  11.         <el-button style="margin-left: 20px" type="primary"  @click="search" icon="el-icon-search">查询</el-button>
  12.         <el-button type="danger" @click="showAddDialog" icon="el-icon-plus">添加</el-button>
  13.       </el-form>
  14.       <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
  15.         &lt;!&ndash; <el-table-column type="selection" ></el-table-column>&ndash;&gt;
  16.         <el-table-column type="index"></el-table-column>
  17.         <el-table-column prop="id" label="胜多负少的"  show-overflow-tooltip>
  18.         </el-table-column>
  19.         <el-table-column prop="b" label="阿达" show-overflow-tooltip>
  20.         </el-table-column>
  21.         <el-table-column prop="c" label="胜多负少" show-overflow-tooltip>
  22.         </el-table-column>
  23.         <el-table-column prop="d" label="苟富贵" show-overflow-tooltip>
  24.         </el-table-column>
  25.         <el-table-column prop="e" label="二维" show-overflow-tooltip>
  26.         </el-table-column>
  27.         <el-table-column prop="f" label="操作" show-overflow-tooltip>
  28.           <template slot-scope="scope">
  29.             <el-button  type="primary" size="mini" @click="showEditDialog(scope.row.id)">编辑</el-button>
  30.             <el-button  type="warning" size="mini" @click="deleteInfo(scope.row.id)">删除</el-button>
  31.           </template>
  32.         </el-table-column>
  33.       </el-table>
  34.       <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>
  35.     </el-col>
  36.  
  37.     <el-dialog
  38.       title="修改"
  39.       :visible.sync="EditdialogVisible"
  40.       width="60%" >
  41.       <el-form :model="eidtForm"  :ref="eidtFormRef" label-width="70px" class="demo-ruleForm">
  42.         <el-form-item label="地方">
  43.           <el-input v-model="eidtForm.id"></el-input>
  44.         </el-form-item>
  45.         <el-form-item label="阿达">
  46.           <el-input v-model="eidtForm.b"></el-input>
  47.         </el-form-item>
  48.         <el-form-item label="地方">
  49.           <el-input v-model="eidtForm.c"></el-input>
  50.         </el-form-item>
  51.         <el-form-item label="胜多负少">
  52.           <el-input v-model="eidtForm.d"></el-input>
  53.         </el-form-item>
  54.         <el-form-item label="给对方" >
  55.           <el-input v-model="eidtForm.e"></el-input>
  56.         </el-form-item>
  57.         <el-form-item label="二维">
  58.           <el-input v-model="eidtForm.f"></el-input>
  59.         </el-form-item>
  60.       </el-form>
  61.       <span slot="footer" class="dialog-footer">
  62.          <el-button @click="EditCanel">取 消</el-button>
  63.          <el-button type="primary" @click="EditInfo">确 定</el-button>
  64.       </span>
  65.     </el-dialog>
  66.  
  67.     <el-dialog
  68.       title="添加"
  69.       :visible.sync="AddDialogVisible"
  70.       width="60%" >
  71.       <el-form :model="addForm"  :ref="addForm" label-width="70px" class="demo-ruleForm">
  72.         <el-form-item label="规划局">
  73.           <el-input v-model="addForm.id"></el-input>
  74.         </el-form-item>
  75.         <el-form-item label="都是废话">
  76.           <el-input v-model="addForm.b"></el-input>
  77.         </el-form-item>
  78.         <el-form-item label="关乎">
  79.           <el-input v-model="addForm.c"></el-input>
  80.         </el-form-item>
  81.         <el-form-item label="师范">
  82.           <el-input v-model="addForm.d"></el-input>
  83.         </el-form-item>
  84.         <el-form-item label="返回" >
  85.           <el-input v-model="addForm.e"></el-input>
  86.         </el-form-item>
  87.         <el-form-item label="发过火">
  88.           <el-input v-model="addForm.f"></el-input>
  89.         </el-form-item>
  90.       </el-form>
  91.       <span slot="footer" class="dialog-footer">
  92.          <el-button @click="AddCanel">取 消</el-button>
  93.          <el-button type="primary" @click="addinfo">确 定</el-button>
  94.       </span>
  95.     </el-dialog>
  96.  
  97.   </div>
  98. </template>
  99.  
  100. <script>
  101.   export default {
  102.     name: "index",
  103.     data: function() {
  104.       return {
  105.         total: 3,
  106.         showDiv: false,
  107.         EditdialogVisible:false,
  108.         AddDialogVisible:false,
  109.         form: {
  110.           md_typeId: '',
  111.           md_typeName: '',
  112.           md_ptName:'',
  113.           pageSize: 2,
  114.           pageIndex: 1
  115.         },
  116.         addForm:{},
  117.         eidtForm:{
  118.           id: '1111111',
  119.           b: '王小虎',
  120.           c: '上海市普陀区金沙江路 1518 弄',
  121.           d:2,
  122.           e:3,
  123.           f:4
  124.         },
  125.         tableData: [{
  126.           id: '1111111',
  127.           b: '王小虎',
  128.           c: '上海市普陀区金沙江路 1518 弄',
  129.           d:2,
  130.           e:3,
  131.           f:4
  132.         }, {
  133.           id: '22222222',
  134.           b: '王小虎',
  135.           c: '上海市普陀区金沙江路 1518 弄',
  136.           d:2,
  137.           e:3,
  138.           f:4
  139.         }, {
  140.           id: '333333',
  141.           b: '王小虎',
  142.           c: '上海市普陀区金沙江路 1518 弄',
  143.           d:2,
  144.           e:3,
  145.           f:4
  146.         }],
  147.         multipleSelection: [],
  148.         currentPage: 1,
  149.         loading: false,
  150.         message:''
  151.       }
  152.     },
  153.     mounted: function() {
  154.       //初始化
  155.       this.search();
  156.     },
  157.     methods: {
  158.       handleSelectionChange: function(val) {
  159.         this.multipleSelection = val;
  160.       },
  161.       handleSizeChange: function(val) {
  162.         this.form.pageSize = val;
  163.         this.search();
  164.       },
  165.       handleCurrentChange: function(val) {
  166.         this.form.pageIndex = val;
  167.         this.search();
  168.       },
  169.  
  170.       showEditDialog(id){
  171.         this.EditdialogVisible=true;
  172.         getObj(id)
  173.           .then(response => {
  174.             this.eidtForm = response.data;
  175.           })
  176.       },
  177.  
  178.       EditCanel(eidtForm){
  179.         this.EditdialogVisible=false;
  180.         this.$refs[eidtForm].resetFields();
  181.       },
  182.  
  183.       EditInfo(){
  184.         //关闭对话框  之后写里面
  185.         this.EditdialogVisible=false;
  186.         putObj(this.eidtForm.id,this.eidtForm)
  187.           .then(response => {
  188.             this.message = response.bodyText;
  189.             //提示成功
  190.             this.$message({
  191.               showClose: true,
  192.               message: this.message,
  193.               type: 'success'
  194.             });
  195.             // 刷新页面
  196.             this.search();
  197.           })
  198.       },
  199.  
  200.       deleteInfo(id){
  201.         this.$confirm('此操作将永久删除, 是否继续?', '提示', {
  202.           confirmButtonText: '确定',
  203.           cancelButtonText: '取消',
  204.           type: 'warning'
  205.         }).then(() => {
  206.           delObj(id)
  207.             .then(() => {
  208.               this.$notify({
  209.                 title: '成功',
  210.                 message: '删除成功',
  211.                 type: 'success',
  212.                 duration: 2000
  213.               });
  214.             });
  215.         });
  216.       },
  217.  
  218.       showAddDialog(){
  219.         this.AddDialogVisible=true;
  220.       },
  221.  
  222.       addinfo(){
  223.         const set = this.$refs;
  224.         set[addForm].validate(valid => {
  225.           if (valid) {
  226.             addObj(this.addForm)
  227.               .then(() => {
  228.                 this.AddDialogVisible = false;
  229.                 this.getList();
  230.                 this.$notify({
  231.                   title: '成功',
  232.                   message: '创建成功',
  233.                   type: 'success',
  234.                   duration: 2000
  235.                 });
  236.               })
  237.           } else {
  238.             return false;
  239.           }
  240.         });
  241.       },
  242.       AddCanel(){
  243.         this.AddDialogVisible=false;
  244.         this.$refs[addForm].resetFields();
  245.       },
  246.  
  247.       search(){
  248.         var vm = this;
  249.         vm.loading=true;
  250.         vm.$http.post(path + '/soft_TypeList', encrypt(vm.form)).then(function(response) {
  251.           var objData = decrypt(response.bodyText);
  252.           vm.tableData = objData.result.list;
  253.           /* vm.total = objData.result.total*/
  254.           vm.loading = false;
  255.         }, function(response) {
  256.           vm.loading = false;
  257.           this.$message({
  258.             showClose: true,
  259.             message: '获取信息查询失败',
  260.             type: 'error'
  261.           });
  262.         });
  263.       }
  264.     }
  265.   }
  266. </script>
  267.  
  268. <style scoped>
  269.   html{
  270.     background: #ffffff;
  271.   }
  272.   .el-form-item {
  273.     margin-bottom: 10px;
  274.   }
  275.   .el-table th {
  276.     background-color: #f0f0f0;
  277.   }
  278.   .el-table thead {
  279.     color: #4f4f4f;
  280.   }
  281.   .el-pagination{
  282.     text-align: center;
  283.   }
  284.  
  285.  
  286. </style>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/300062
推荐阅读