Vue中的vxe-table教程26-编辑表格-弹框编辑

效果图：

1. index.html代码

2. main.css代码

@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");

3. main.js代码

window.MOCK_DATA_LIST = [{"name": "zhangsan", "sex": "0", "age": 29, "address": "河北保定"},{"name": "zhangsan", "sex": "0", "age": 29, "address": "河北保定"},{"name": "zhangsan", "sex": "0", "age": 29, "address": "河北保定"},{"name": "zhangsan", "sex": "0", "age": 29, "address": "河北保定"},{"name": "zhangsan", "sex": "0", "age": 29, "address": "河北保定"},{"name": "zhangsan", "sex": "0", "age": 29, "address": "河北保定"},{"name": "zhangsan", "sex": "0", "age": 29, "address": "河北保定"},{"name": "zhangsan", "sex": "0", "age": 29, "address": "河北保定"},{"name": "zhangsan", "sex": "0", "age": 29, "address": "河北保定"},{"name": "zhangsan", "sex": "0", "age": 29, "address": "河北保定"},{"name": "zhangsan", "sex": "0", "age": 29, "address": "河北保定"},{"name": "zhangsan", "sex": "0", "age": 29, "address": "河北保定"},
];var Main = {data() {return {submitLoading: false,tableData: [],selectRow: null,showEdit: false,sexList: [{label: '女', value: '0'},{label: '男', value: '1'}],formData: {name: null,nickname: null,role: null,sex: null,age: null,num: null,checkedList: [],flag1: null,date3: null,address: null},formRules: {name: [{required: true, message: '请输入名称'},{min: 3, max: 5, message: '长度在 3 到 5 个字符'}],nickname: [{required: true, message: '请输入昵称'}],sex: [{required: true, message: '请选择性别'}]},formItems: [{title: '基本信息',span: 24,titleAlign: 'left',titleWidth: 200,titlePrefix: {icon: 'fa fa-address-card-o'}},{field: 'name', title: 'Name', span: 12, itemRender: {name: '$input', props: {placeholder: '请输入名称'}}},{field: 'nickname',title: 'Nickname',span: 12,itemRender: {name: '$input', props: {placeholder: '请输入昵称'}}},{field: 'role', title: 'Role', span: 12, itemRender: {name: '$input', props: {placeholder: '请输入角色'}}},{field: 'sex', title: 'Sex', span: 12, itemRender: {name: '$select', options: []}},{field: 'age',title: 'Age',span: 12,itemRender: {name: '$input', props: {type: 'number', placeholder: '请输入年龄'}}},{field: 'flag1',title: '是否单身',span: 12,itemRender: {name: '$radio', options: [{label: '是', value: 'Y'}, {label: '否', value: 'N'}]}},{field: 'checkedList',title: '可选信息',span: 24,visibleMethod: this.visibleMethod,itemRender: {name: '$checkbox',options: [{label: '运动、跑步', value: '1'}, {label: '听音乐', value: '2'},{label: '泡妞', value: '3'}, {label: '吃美食', value: '4'}]}},{title: '其它信息',span: 24,titleAlign: 'left',titleWidth: 200,titlePrefix: {message: '请填写必填项', icon: 'fa fa-info-circle'}},{field: 'num',title: 'Number',span: 12,itemRender: {name: '$input', props: {type: 'number', placeholder: '请输入数值'}}},{field: 'date3',title: 'Date',span: 12,itemRender: {name: '$input', props: {type: 'date', placeholder: '请选择日期'}}},{field: 'address',title: 'Address',span: 24,titleSuffix: {message: '提示信息！！', icon: 'fa fa-question-circle'},itemRender: {name: '$textarea', props: {autosize: {minRows: 2, maxRows: 4}, placeholder: '请输入地址'}}},{align: 'center',span: 24,titleAlign: 'left',itemRender: {name: '$buttons',children: [{props: {type: 'submit', content: '提交', status: 'primary'}}, {props: {type: 'reset',content: '重置'}}]}}]}},created() {this.formItems[4].itemRender.options = this.sexListthis.tableData = window.MOCK_DATA_LIST.slice(0, 20)},methods: {formatterSex({cellValue}) {let item = this.sexList.find(item => item.value === cellValue)return item ? item.label : ''},visibleMethod({data}) {return data.flag1 === 'Y'},cellDBLClickEvent({row}) {this.editEvent(row)},insertEvent() {this.formData = {name: '',nickname: '',role: '',sex: '',age: '',num: '',checkedList: [],flag1: '',date3: '',address: ''}this.selectRow = nullthis.showEdit = true},editEvent(row) {this.formData = {name: row.name,nickname: row.nickname,role: row.role,sex: row.sex,age: row.age,num: row.num,checkedList: row.checkedList,flag1: row.flag1,date3: row.date3,address: row.address}this.selectRow = rowthis.showEdit = true},removeEvent(row) {this.$XModal.confirm('您确定要删除该数据?').then(type => {if (type === 'confirm') {this.$refs.xTable.remove(row)}})},submitEvent() {this.submitLoading = truesetTimeout(() => {this.submitLoading = falsethis.showEdit = falseif (this.selectRow) {this.$XModal.message({message: '保存成功', status: 'success'})Object.assign(this.selectRow, this.formData)} else {this.$XModal.message({message: '新增成功', status: 'success'})this.$refs.xTable.insert(this.formData)}}, 500)}}
};var app = new Vue(Main).$mount('#app');
// 给 vue 实例挂载内部对象，例如
Vue.prototype.$XModal = VXETable.modal;
Vue.prototype.$XPrint = VXETable.print;
Vue.prototype.$XSaveFile = VXETable.saveFile;
Vue.prototype.$XReadFile = VXETable.readFile;

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！