Vue+BootStrap4列表增删改查

 实现效果： 列表中的数据是使用Mockjs生成的。

列表代码：

<table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th><input @change="allChange" v-model="state.checkAll" type="checkbox"></th>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>证件号</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>手机号</th>
                    <th>地址</th>
                    <th width="180">操作</th>
                </tr>
            </thead>

            <tbody>
                <tr v-for="(user,index) in state.users">
                    <td><input :value="user.uid" v-model.trim="state.items" type="checkbox"></td>
                    <td>{{index+1}}</td>
                    <td>{{user.name}}</td>
                    <td>{{user.card}}</td>
                    <td>{{gender(user.card)}}</td>
                    <td>{{age(user.card)}}</td>
                    <td>{{user.phone}}</td>
                    <td>{{user.address}}</td>
                    <td>
                        <div class="btn-group">
                            <button @click="user_detail(user)" class="btn btn-info btn-sm">详情</button>
                            <button @click="user_update(user)" class="btn btn-warning btn-sm">编辑</button>
                            <button @click="user_del(user)" class="btn btn-danger btn-sm">删除</button>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

点击添加按钮，弹出对话框，对话框中对证件号和手机号进行校验：

默认确定按钮不可用，当证件号和手机号校验成功后，方可点击。

html代码如下：

<div class="modal fade" id="addOrUpdateDialog" data-backdrop="static" data-keyboard="false" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog ">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">{{state.title}}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group row">
                                <label for="txtName" class="col-md-3 col-sm-3  col-form-label text-right">姓名：</label>
                                <div class="col-md-9 col-sm-9">
                                    <input id="txtName" type="text" v-model="state.user.name" class="form-control">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="txtCard" class="col-md-3 col-sm-3  col-form-label text-right">证件号：</label>
                                <div class="col-md-9 col-sm-9">
                                    <input id="txtCard" v-model="state.user.card" type="text" class="form-control">
                                    <div v-if="state.cardInfoShow" class="text-danger">证件号不合法</div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="txtPhone" class="col-md-3 col-sm-3  col-form-label text-right">手机号：</label>
                                <div class="col-md-9 col-sm-9">
                                    <input id="txtPhone" v-model="state.user.phone" type="text" class="form-control">
                                    <div v-if="state.phoneInfoShow" class="text-danger">手机号不合法</div>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="txtEmail" class="col-md-3 col-sm-3  col-form-label text-right">邮箱：</label>
                                <div class="col-md-9 col-sm-9">
                                    <input id="txtEmail" v-model="state.user.email" type="text" class="form-control">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="txtPlace" class="col-md-3 col-sm-3  col-form-label text-right">籍贯：</label>
                                <div class="col-md-9 col-sm-9">
                                    <input id="txtPlace" v-model="state.user.place" type="text" class="form-control">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="txtAddress"
                                    class="col-md-3 col-sm-3  col-form-label text-right">现住址：</label>
                                <div class="col-md-9 col-sm-9">
                                    <input id="txtAddress" v-model="state.user.address" type="text"
                                        class="form-control">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="txtDesc" class="col-md-3 col-sm-3  col-form-label text-right">简介：</label>
                                <div class="col-md-9 col-sm-9">
                                    <textarea id="txtDesc" v-model="state.user.desc" class="form-control"
                                        style="height: 120px; resize: none;"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" :disabled="!isOkShow" @click="ok" class="btn btn-primary">确定</button>
                    </div>
                </div>
            </div>
        </div>

添加和编辑为一个对话框。列表上的性别是根据身份证号计算显示的。

点击详情按钮显示详情信息：对话框类似于添加，但没有input输入框。

点击删除按钮，显示确认对话框如下：

部分js代码：

//批量删除按钮点击触发的动作
            const batch_del = () => {
                if (confirm('确认批量删除选中的数据吗')) {
                    //splice
                    state.items.forEach(id => {
                        state.users.splice(getIndexById(id), 1);
                    });
                    state.items = [];
                }
            }

            const user_del = (_user) => {
                if (confirm(`确认删除 ${_user.name} 的数据吗`)) {
                    state.users.splice(getIndexById(_user.uid), 1)

                    let index = state.items.indexOf(_user.uid);
                    if (index != -1) {
                        state.items.splice(index, 1);
                    }
                }
            }

点击编辑按钮： 数据使用Mockjs生成的

同样证件号和手机号都有校验，使用正则表达式，代码如下：

watch([() => state.user.card, () => state.user.phone], (nVal) => {
                const cardRegex = /^[1-9]\d{5}(18|19|20)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/;
                if (cardRegex.test(nVal[0])) {
                    state.cardInfoShow = false;
                } else {
                    state.cardInfoShow = true;
                }

                const phoneRegex = /^1[3-9]\d{9}$/;
                if (phoneRegex.test(nVal[1])) {
                    state.phoneInfoShow = false;
                } else {
                    state.phoneInfoShow = true;
                }

            })

顶部的搜索：添加了一个input事件，用户输入或者删除既触发该事件。

//用户搜索
            const user_search = () => {
                console.log(state.txtSearch);
                if (state.txtSearch) {
                    state.users = originalArr.filter(_user => {
                        return _user.name.indexOf(state.txtSearch) != -1 || _user.card.indexOf(state.txtSearch) != -1
                    })
                } else {
                    state.users = originalArr;
                }
            }

下载地址：x​​​​​​​https://download.youkuaiyun.com/download/houmanjunxi/89941983