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>