专业的网站开发,搭建网站,wordpress自动上传至cdn,大连网站建设怎么样点击编辑#xff0c;行内编辑输入框出现#xff0c;给列表的每条数据定义编辑标记#xff0c;最后一定记得 v-model双向绑定#xff0c;使数据回显。 步骤#xff1a; 1、给行数据定义编辑标记 2、点击行编辑标记#xff08;isedit#xff09; 3、插槽根据标记渲染表单 …点击编辑行内编辑输入框出现给列表的每条数据定义编辑标记最后一定记得 v-model双向绑定使数据回显。 步骤 1、给行数据定义编辑标记 2、点击行编辑标记isedit 3、插槽根据标记渲染表单 el-table :datalist border stylewidth: 100% v-loadingloadingel-table-column propname label角色 width180template v-slot{ row }!--如果在编辑状态下显示--el-inputv-ifrow.isEditsizeminiv-modelrow.editRow.name/el-input!--不在编辑状态下显示--span v-else{{ row.name }}/span/template/el-table-columnel-table-column propstate label启用 width180template v-slot{ row }!--如果在编辑状态下显示--template v-ifrow.isEditel-switchsizemini:active-value1:inactive-value0v-modelrow.editRow.state/el-switch/template!--不在编辑状态下显示--template v-elsespan{{row.state 1 ? 已启用 : row.state 0 ? 未启用 : 无}}/span/template/template/el-table-columnel-table-column propdescription label描述template v-slot{ row }!--如果在编辑状态下显示--el-inputv-ifrow.isEditsizeminiv-modelrow.editRow.description/el-input!--不在编辑状态下显示--span v-else{{ row.description }}/span/template/el-table-columnel-table-column label操作template v-slot{ row }!--如果在编辑状态下显示--template v-ifrow.isEdittemplateel-button sizemini typeprimary clickbtnok(row)确认/el-button/templatetemplateel-button sizemini clickrow.isEdit false取消/el-button/template/template!--不在编辑状态下显示--template v-elsetemplateel-button typetext权限管理/el-button/templatetemplateel-button typetext clickbtnEditRow(row)编辑/el-button/templatetemplateel-popconfirmtitle这是一段内容确定删除吗onConfirmconfirmDel(row.id)el-buttonslotreferencestylemargin-left: 10pxsizeminitypetext删除/el-button/el-popconfirm/template/template/template/el-table-column/el-tableimport { getRoleList, addRole, updateRole, delRole } from /api/role.js;
export default {data() {return {formInfo: {name: ,description: ,state: 0,},}},methods:{async getRoleList() {this.loading true;const { rows} await getRoleList();this.list rows;this.loading false;this.list.forEach((item) {// item.isEdit false // 添加一个属性 初始值为false// 数据响应式的问题 数据变化 视图更新 // 添加的动态属性 不具备响应式特点// this.$set(目标对象, 属性名称, 初始值) 可以针对目标对象 添加的属性 添加响应式this.$set(item, isEdit, false);this.$set(item, editRow, {name: item.name,state: item.state,description: item.description,});});},//点击编辑btnEditRow(row) {row.isEdit true // 改变行的编辑状态// 更新缓存数据row.editRow.name row.name;row.editRow.state row.state;row.editRow.description row.description;},async btnok(row) {if (row.editRow.name row.editRow.description) {await updateRole({ ...row.editRow, id: row.id });// 更新成功this.$message.success(更新成功);// 更新显示数据 退出编辑状态// row.name row.editRow.name // eslint的一校验 误判Object.assign(row, {...row.editRow,isEdit: false, // 退出编辑模式});} else {this.$message.warning(角色和描述不能为空);}},async confirmDel(id) {await delRole(id); // 后端删除this.$message.success(删除角色成功);// 删除的如果是最后一个,if (this.list.length 1) {this.pageParams.page--;}this.getRoleList();},}}点击编辑数据回显 确认取消
删除
