zoukankan      html  css  js  c++  java
  • Vue中常用表格(增删改查)

      1 <template>
      2  <div>
      3   <el-button style="float:left;margin-left:20px;" type="primary" @click="add_dialogVisible = true"
      4    >新增用户</el-button
      5   >
      6   <el-table
      7    :data="getSearchInfo.slice((currpage - 1) * pageSize, currpage * pageSize)"
      8    style=" 100%"
      9   >
     10    <template v-for="(item, index) in user_data_title">
     11     <el-table-column :prop="item.prop" :label="item.label" align="center" :key="index">
     12     </el-table-column>
     13    </template>
     14    <el-table-column align="center">
     15     <template slot="header" slot-scope="scope">
     16      <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
     17     </template>
     18     <template slot-scope="scope">
     19      <el-button size="mini" plain type="primary" @click="handleEdit(scope.row)">编辑</el-button>
     20      <el-button size="mini" plain type="danger" @click="handleDelete(scope.row)">删除</el-button>
     21      <el-button size="mini" plain type="warning" @click="handleChagePwd(scope.row)"
     22       >修改密码</el-button
     23      >
     24     </template>
     25    </el-table-column>
     26   </el-table>
     27   <el-pagination
     28    background
     29    :page-size="pageSize"
     30    :page-sizes="[10, 20, 50]"
     31    :current-page.sync="currentPage"
     32    :total="getSearchInfo.length"
     33    @size-change="handleSizeChange"
     34    @current-change="handleCurrentChange"
     35    layout="sizes, total, prev, pager, next, jumper"
     36   >
     37   </el-pagination>
     38   <!-- 新增用户 -->
     39   <div class="add_dialog">
     40    <el-dialog
     41     title="新增用户"
     42     :visible.sync="add_dialogVisible"
     43     :close-on-click-modal="false"
     44     :close-on-press-escape="false"
     45     :show-close="false"
     46     width="500px"
     47    >
     48     <el-form>
     49      <el-form-item label="用户名:">
     50       <el-input
     51        v-model.trim="add.user_name"
     52        placeholder="请输入用户名"
     53        autocomplete="off"
     54       ></el-input>
     55      </el-form-item>
     56      <el-form-item label="密码:">
     57       <el-input v-model.trim="add.password" placeholder="请输入密码" autocomplete="off"></el-input>
     58      </el-form-item>
     59     </el-form>
     60     <span slot="footer" class="dialog-footer">
     61      <el-button @click="cancel('add')">取 消</el-button>
     62      <el-button type="primary" @click="add_determine">确 定</el-button>
     63     </span>
     64    </el-dialog>
     65   </div>
     66   <!-- 编辑用户 -->
     67   <div class="edit_dialog">
     68    <el-dialog
     69     title="编辑用户"
     70     :visible.sync="edit_dialogVisible"
     71     :close-on-click-modal="false"
     72     :close-on-press-escape="false"
     73     :show-close="false"
     74     width="500px"
     75    >
     76     <el-form>
     77      <el-form-item label="用户名:">
     78       <el-input
     79        v-model.trim="edit.user_name"
     80        placeholder="请输入用户名"
     81        autocomplete="off"
     82       ></el-input>
     83      </el-form-item>
     84      <el-form-item label="密码:">
     85       <el-input v-model.trim="edit.password" placeholder="请输入密码" autocomplete="off"></el-input>
     86      </el-form-item>
     87     </el-form>
     88     <span slot="footer" class="dialog-footer">
     89      <el-button @click="cancel('edit')">取 消</el-button>
     90      <el-button type="primary" @click="edit_determine">确 定</el-button>
     91     </span>
     92    </el-dialog>
     93   </div>
     94   <!-- 修改密码弹窗 -->
     95   <div class="changePwd_dialog">
     96    <el-dialog
     97     :title="changeName"
     98     :visible.sync="changePwd_dialogVisible"
     99     :close-on-click-modal="false"
    100     :close-on-press-escape="false"
    101     :show-close="false"
    102     width="500px"
    103    >
    104     <div>
    105      <span :style="inlineStyle">修改密码:</span>
    106      <el-input
    107       :style="inlineStyle"
    108       v-model.trim="change.new_pwd"
    109       placeholder="请输入新密码"
    110      ></el-input>
    111     </div>
    112     <span slot="footer" class="dialog-footer">
    113      <el-button @click="cancel('changePwd')">取 消</el-button>
    114      <el-button type="primary" @click="changePwd_determine">确 定</el-button>
    115     </span>
    116    </el-dialog>
    117   </div>
    118  </div>
    119 </template>
    120 
    121 <script>
    122 export default {
    123  name: 'UserManagement',
    124  inject: ['reload'],
    125  data() {
    126   return {
    127    add_dialogVisible: false,
    128    edit_dialogVisible: false,
    129    changePwd_dialogVisible: false,
    130    user_data: [],
    131    user_data_title: [
    132     {
    133      prop: 'name',
    134      label: '用户名',
    135     },
    136     {
    137      prop: 'password',
    138      label: '密码',
    139     },
    140     {
    141      prop: 'createTime',
    142      label: '创建时间',
    143     },
    144    ],
    145    search: '',
    146    currpage: 1,
    147    pageSize: 10,
    148    currentPage: null,
    149    add: {
    150     // 新增用户
    151     user_name: '',
    152     password: '',
    153    },
    154    edit: {
    155     // 编辑用户
    156     user_name: '',
    157     password: '',
    158    },
    159    changeName: '',
    160    change: {
    161     // 修改密码
    162     new_pwd: '',
    163    },
    164    inlineStyle: {
    165     // span和input在同一行
    166     display: 'inline',
    167    },
    168   }
    169  },
    170  computed: {
    171   getSearchInfo() {
    172    //   搜索
    173    let search = this.search
    174    if (search) {
    175     this.currpage = 1
    176     this.currentPage = 1
    177     return this.user_data.filter(data => {
    178      return Object.keys(data).some(key => {
    179       return (
    180        String(data[key])
    181         .toLowerCase()
    182         .indexOf(search) > -1
    183       )
    184      })
    185     })
    186    }
    187    return this.user_data
    188   },
    189  },
    190  methods: {
    191   get_user_data() {
    192    this.user_data = []
    193    let data = this.$mockjs.mock({
    194     'user_data|20': [
    195      {
    196       user_id: '@natural',
    197       name: '@cname',
    198       password: '@word',
    199       createTime: '@datetime',
    200      },
    201     ],
    202    })
    203    this.user_data = data.user_data
    204   },
    205   handleEdit(row) {
    206    // 编辑
    207    console.log(row)
    208    this.edit.user_name = row.name
    209    this.edit.password = row.password
    210    this.edit_dialogVisible = true
    211   },
    212   edit_determine() {
    213    // 提交编辑信息
    214    console.log(this.edit)
    215   },
    216   handleDelete(row) {
    217    // 删除
    218    this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
    219     confirmButtonText: '确定',
    220     cancelButtonText: '取消',
    221     type: 'warning',
    222    })
    223     .then(() => {
    224      this.$message({
    225       type: 'success',
    226       message: '删除成功!',
    227      })
    228     })
    229     .catch(() => {
    230      return false
    231     })
    232   },
    233   handleChagePwd(row) {
    234    // 修改密码
    235    console.log(row)
    236    this.changeName = row.name
    237    this.changePwd_dialogVisible = true
    238   },
    239   changePwd_determine() {
    240    // 提交新密码
    241    console.log(this.change)
    242   },
    243   handleCurrentChange(cpage) {
    244    // 点击页数
    245    this.currpage = cpage
    246   },
    247   handleSizeChange(val) {
    248    this.pageSize = val
    249   },
    250   add_determine() {
    251    // 提交新用户信息
    252    console.log(this.add)
    253   },
    254   cancel(data) {
    255    // 取消
    256    switch (data) {
    257     case 'add':
    258      this.add = {}
    259      this.add_dialogVisible = false
    260      break
    261     case 'changePwd':
    262      this.change = {}
    263      this.changePwd_dialogVisible = false
    264      break
    265     default:
    266      this.edit = {}
    267      this.edit_dialogVisible = false
    268      break
    269    }
    270   },
    271  },
    272  mounted() {
    273   this.get_user_data()
    274  },
    275 }
    276 </script>
    277 
    278 <style scoped>
    279 .edit_dialog /deep/ .el-dialog,
    280 .add_dialog /deep/ .el-dialog,
    281 .changePwd_dialog /deep/ .el-dialog {
    282  border-radius: 15px;
    283 }
    284 .changePwd_dialog /deep/ .el-input__inner {
    285   300px;
    286 }
    287 </style>
  • 相关阅读:
    Mysql登录错误:ERROR 1045 (28000): Plugin caching_sha2_password could not be loaded
    Docker配置LNMP环境
    Docker安装mysqli扩展和gd扩展
    Docker常用命令
    Ubuntu常用命令
    单例模式的优缺点和使用场景
    ABP 多租户数据共享
    ABP Core 后台Angular+Ng-Zorro 图片上传
    ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.
    AbpCore 执行迁移文件生成数据库报错 Could not find root folder of the web project!
  • 原文地址:https://www.cnblogs.com/lyt520/p/14865817.html
Copyright © 2011-2022 走看看