vue修改组件数据,vue的增删改查实战
本文主要详细介绍了添加、删除和修改Vue参数的例子。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
显示参数详情显示参数详情功能删除参数详情功能更新和汇总静态属性。
展示参数明细
elementui Tag标签
El-表格-列标签=详细信息类型=展开
模板槽-范围=“范围”
！-循环渲染标记组件参数详细信息-
el-tag :key=i v-for=(item，I)in scope . row . attr _ vals closed @ close= handle close(scope . row，I)
{{ item }}
/el-tag
！-输入文本框-
El-input class= input-new-tag v-if= input visible v-model= input value ref= savetag input size= small @ keyup . enter . native= handle input confirm @ blur= handle input confirm
/el-input
！-添加了按钮i -
El-button v-else class= button-New-Tag size= small @ click= show input 新标记/el-button
/模板
//获取分类参数的数据
异步getParamsData() {
//确定是否选择了三级分类，如果没有，重新选择。
if (this.selectdKeys.length！==3) {
this.selectdKeys=[]
this.paramsData=[]
返回
}
//根据选择的分类获取动态参数或静态属性的三级分类id
const { data: res }=等待此消息。$ http . get(` categories/$ { this . cateid }/attributes ，{
参数：{
sel: this.activeName，
},
})
if (res.meta.status！==200) {
归还这个。$message.error(无法获取参数列表)
}
//处理参数细节：用空格拆分成数组。
res.data.forEach(item={
item.attr_vals=item.attr_vals？item.attr_vals.split(，):[]
})
console.log(res.data)
this.paramsData=res.data
},
展示参数明细功能
控制输入框的显示。
显示输入
//tag标记显示文本输入框。
inputVisible:false
！-输入文本框-
El-input class= input-new-tag v-if= input visible v-model= input value ref= savetag input size= small @ keyup . enter . native= handle input confirm @ blur= handle input confirm
/el-input
！-添加了按钮i -
El-button v-else class= button-New-Tag size= small @ click= show input 新标记/el-button
//标记显示文本输入框
showInput(){
this.inputVisible=true
}
输入框太宽，请修改长度。输入-新标签{
宽度：120px
}
但是，现在会有一个问题。颜色和大小属性应该是独立的，互不影响，但这里有关联(当你点击按钮时，颜色和大小会出现在输入框中，如果你输入内存，也会同时输入)
无法直接在数据中定义以下属性
//tag标记显示文本输入框。
inputVisible:false
解决方法:该属性可以添加到后端返回的参数数据中，控制文本框的显示和隐藏。
//处理参数细节：用空格拆分成数组。
res.data.forEach(item={
item.attr_vals=item.attr_vals？item.attr_vals.split(，):[]
Item.inputVisible=false //控制文本框的显示和隐藏
})
这里v-if相当于从这一行数据中获取这个值进行控制。
！-输入文本框-
El-input class= input-new-tag v-if= scope . row . input visible v-model= scope . row . input value ref= savetag input size= small @ keyup . enter . native= handle input confirm @ blur= handle input confirm
这是在文本框中输入的值。
v-model=scope.row.inputValue
//处理参数细节：用空格拆分成数组。
res.data.forEach(item={
item.attr_vals=item.attr_vals？item.attr_vals.split(，):[]
item.inputVisible=false //控制文本框的显示和隐藏
item.inputValue= //文本框输入的值
})
这两步的目的就是让添加参数的按钮输入框互不产生影响
showInput(scope.row)这里需要拿到参数对象
！-添加的按钮异
El-button v-else class= button-New-Tag size= small @ click= show input(scope。行)新标记/el-button
所以获取到用户输入的参数后先添加到参数明细属性_vals中
划。属性_ vals。推(排。输入值。trim())
//标签显示文本输入框
showInput(row){
row.inputVisible=true
这个. nextTick(_={
//点击新增按钮后输入框获取焦点ref=saveTagInput
这个参考文献。保存标签输入。$参考文献。输入。焦点()；
});
},
//文本框失去焦点或按下进入按键
handleInputConfirm(第行){
if(row.inputValue.trim()){
划。属性_ vals。推(排。输入值。trim())
//更新参数的明细
this.updateParamsDetail(row)
}
row.inputVisible=false
},
//更新参数的明细
async updateParamsDetail(row){
const {data:res}=等待此消息. http。放(` categories/$ { this。cateid }/attributes/$ { row。attr _ id } `)，{
属性名：行属性名，
属性选择：行属性选择，
attr_vals:row.attr_vals.join(，)
})
if(res.meta.status！==200){
归还这个message.error(更新参数明细失败)
}
这个message.success(更新参数明细成功!)
}
这里失去焦点和执行进入会触发两次事件，执行两次
row.inputValue=
//文本框失去焦点或按下进入按键
handleInputConfirm(第行){
if(row.inputValue.trim()){
划。属性_ vals。推(排。输入值。trim())
//更新参数的明细
this.updateParamsDetail(row)
}
row.inputVisible=false
//执行完一次（输入或者失去焦点)清空，这样就不会执行上面的如果
row.inputValue=
},
实现删除参数明细功能
splice 方法
//监视标签标签的关闭事件，即删除对应的参数明细项
handleClose(){
row.attr_vals.splice(i，1)
//更新参数的明细
this.updateParamsDetail(row)
},
实现静态属性的更新
埃尔-表格-列标签=明细type=expand
模板槽-范围="范围"
！-循环渲染标签组件参数明细-
el-tag :key=i v-for=(item，I)在范围内。划。attr _ vals closed @ close= handle close(范围。排，我)’
{{ item }}
/el-tag
！-输入的文本框-
El-input class= input-new-tag v-if= scope。划。输入可见 v-model= input value ref= save tag input size= small @ keyup。进入。native= handleInputConfirm(范围。row) @ blur= handleInputConfirm(范围。行)
/el-input
！-添加的按钮异
El-button v-else class= button-New-Tag size= small @ click= show input(scope。行)新标记/el-button
/模板
/El-表格-列
只需要把动态属性的明细复制到静态属性即可
完整代码
模板
差异
！-面包屑导航-
el面包屑分隔符-class=el-icon-arrow-right
El-bread crumb-item:to= { path:/home } 首页/el-breadcrumb-item
埃尔-面包屑-项目商品管理/el-breadcrumb-item
埃尔-面包屑-项目分类参数/el-breadcrumb-item
/el-breadcrumb
！-卡片试图-
电子贺卡
！-提示信息-
el-alert title=注意：只允许为第三级分类设置相关参数!type= warning show-icon:closed= false /El-alert
！-选择商品分类-
el-row class=cat_select
埃尔-科尔
跨度选择商品分类：/span
El-cascader v-model= selectd keys :options= cateList :props= cascader props @ change= handle change clearable/El-cascader
/el-col
/el-row
！-标签标签页-
El-tabs v-model= active name @ ta B-click= handle click
el-tab-pane label=动态参数name=many
El-button type= primary size= mini :disabled= BTN禁用 @ click= addDialogVisible=true 添加参数/el-button
el-table :data=paramsData 边框条带
埃尔-表格-列标签=明细type=expand
模板槽-范围="范围"
！-循环渲染标签组件参数明细-
el-tag :key=i v-for=(item，I)在范围内。划。attr _ vals closed @ close= handle close(范围。排，我)’
{{ item }}
/el-tag
！-输入的文本框-
埃尔输入
输入-新标签
v-if=scope.row.inputVisible
v-model=scope.row.inputValue
ref=saveTagInput
大小=小
@ keyup。进入。native= handle input confirm(范围。行)
@ blur=处理输入确认(范围。行)
/el-input
！-添加的按钮异
El-button v-else class= button-New-Tag size= small @ click= show input(scope。行)新标记/el-button
/模板
/El-表格-列
埃尔-表格-列标签=序号type= index /El-表格-列
埃尔-表格-列标签=参数名称prop=属性名称/El-表格-列
埃尔-表格-列标签=操作
模板槽-范围="范围"
El-button type= primary icon= El-icon-edit size= mini @ click= showEditDialog(范围。划。 attr _ id)编辑/el-button
El-button type= warning icon= El-icon-delete size= mini @ click= remove params(scope。划。 attr _ id)删除/el-button
/模板
/El-表格-列
/el-table
/El-选项卡-窗格
el-tab-pane label=静态属性name=only
El-button type= primary size= mini :disabled= BTN禁用 @ click= addDialogVisible=true 添加属性/el-button
el-table :data=paramsData 边框条带
埃尔-表格-列标签=明细type=expand
模板槽-范围="范围"
！-循环渲染标签组件参数明细-
el-tag :key=i v-for=(item，I)在范围内。划。attr _ vals closed @ close= handle close(范围。排，我)’
{{ item }}
/el-tag
！-输入的文本框-
埃尔输入
输入-新标签
v-if=scope.row.inputVisible
v-model=scope.row.inputValue
ref=saveTagInput
大小=小
@ keyup。进入。native= handle input confirm(范围。行)
@ blur=处理输入确认(范围。行)
/el-input
！-添加的按钮异
El-button v-else class= button-New-Tag size= small @ click= show input(scope。行)新标记/el-button
/模板
/El-表格-列
埃尔-表格-列标签=序号type= index /El-表格-列
埃尔-表格-列标签=属性名称prop=属性名称/El-表格-列
埃尔-表格-列标签=操作
模板槽-范围="范围"
El-button type= primary icon= El-icon-edit size= mini @ click= showEditDialog(范围。划。 attr _ id)编辑/el-button
El-button type= warning icon= El-icon-delete size= mini @ click= remove params(scope。划。 attr _ id)删除/el-button
/模板
/El-表格-列
/el-table
/El-选项卡-窗格
/el-tabs
/电子名片
！-添加对话框-
el-dialog :title= 添加标题:可见。sync= addDialogVisible width= 50% @ close= addDialogClosed
El-form:model= addForm :rules= addFormRules ref= addFormRef label-width= 100px
El-form-item:label= title prop= attr _ name
埃尔输入v-model=addForm.attr_name/el输入
/El-表单-项目
/el格式
span slot=页脚 class=对话框-页脚
El-button @ click= addDialogVisible=false 取消/el-button
El-button type= primary @ click= add params()确定/el-button
/span
/el-dialog
！-修改对话框-
el-dialog :title= 修改标题:可见。sync= editDialogVisible width= 50% @ close= editDialogClosed
El-form:model= editForm :rules= editFormRules ref= editFormRef label-width= 100px
El-form-item:label= title prop= attr _ name
埃尔输入v-model=编辑表单。属性名称/El输入
/El-表单-项目
/el格式
span slot=页脚 class=对话框-页脚
El-button @ click= editDialogVisible=false 取消/el-button
El-button type= primary @ click= edit params()确定/el-button
/span
/el-dialog
/div
/模板
脚本
导出默认值{
data() {
返回{
//分类列表
类别列表：[],
//级联选择器的属性配置
cascaderProps: {
标签:"卡特彼勒名称",
值：猫标识，
孩子："孩子",
expandTrigger:悬停，
},
//级联选择器选中的编号数组
selectdKeys: []，
//激活第几个标签页
活动名称："许多",
//获取参数属性数据
paramsData: []，
//添加参数对话框
addDialogVisible: false，
addForm: {}，
addFormRules: {
属性名：[{要求：真，消息： 请输入参数名称，触发器：模糊 }],
},
//编辑参数对话框
editDialogVisible: false，
编辑形式：{},
编辑表单规则：{
属性名：[{要求：真，消息： 请输入参数名称，触发器：模糊 }],
},
}
},
已创建(){
this.getCateList()
},
方法：{
//获取所有分类列表数据（因为没有传递具体参数)
异步getCateList() {
const { data: res }=等待此消息. http.get(类别)
if (res.meta.status！==200) {
归还这个message.error(获取分类失败)
}
this.cateList=res.data
},
//监听级联选择器的改变事件
handleChange() {
this.getParamsData()
},
//监听标签页的点击事件
handleClick() {
this.getParamsData()
},
//获取分类参数的数据
异步getParamsData() {
//判断是否选中三级分类，如果未选中则重新选中
if (this.selectdKeys.length！==3) {
this.selectdKeys=[]
this.paramsData=[]
返回
}
//根据所选分类获取动态参数或者静态属性三级分类的编号
const { data: res }=等待此消息. http。get(` categories/$ { this。 cateid }/attributes ，{
参数：{
sel: this.activeName，
},
})
if (res.meta.status！==200) {
归还这个message.error(获取参数列表失败)
}
//对参数的明细进行处理：按空格拆分为数组
res.data.forEach((item)={
item.attr_vals=item.attr_vals？item.attr_vals.split(，):[]
item.inputVisible=false //控制文本框的显示和隐藏
})
console.log(res.data)
this.paramsData=res.data
},
//监听添加对话框的关闭事件
addDialogClosed() {
这个. refs.addFormRef.resetFields()
},
//添加参数
addParams() {
这个参考文献。addformref。验证(异步(有效)={
如果(!有效){
返回
}
const { data: res }=等待此消息. http。post(` categories/$ { this。 cateid }/attributes ，{
属性名：this.addForm.attr_name，
attr_sel: this.activeName，
})
if (res.meta.status！==201) {
归还这个message.error(添加参数失败)
}
this.addDialogVisible=false
this.getParamsData()
这个message.success(添加参数成功)
})
},
//删除参数
removeParams(id) {
这个. $确认(确定要删除该参数吗？, 提示, {
confirmButtonText:确定，
取消按钮文本： 取消，
类型：警告，
})。然后(async ()={
const { data: res }=等待此消息. http。删除(` categories/$ { this。cateid }/attributes/$ { id } `)
if (res.meta.status！==200) {
归还这个message.error(删除参数失败)
}
this.getParamsData()
这个message.success(删除参数成功)
})。catch(()={
这个消息({
类型："信息",
消息： 已取消删除，
})
})
},
//显示编辑对话框
异步showEditDialog(id) {
const { data: res }=等待此消息. http。get(` categories/$ { this。cateid }/attributes/$ { id } `)，{
参数：{
attr_sel: this.activeName，
},
})
if (res.meta.status！==200) {
归还这个message.error(查询参数失败)
}
this.editForm=res.data
this.editDialogVisible=true
},
//监听修改对话框的关闭事件
editDialogClosed() {
这个. refs.editFormRef.resetFields()
},
//修改参数
editParams() {
这个参考文献。editformref。验证(异步(有效)={
如果(!有效){
返回
}
const { data: res }=等待此消息. http。放(` categories/$ { this。cateid }/attributes/$ { this。编辑表单。attr _ id } `)，{
attr _ name:这个。编辑表单。属性名称，
attr_sel: this.activeName，
attr _ vals:这个。编辑表单。attr _ vals，
})
if (res.meta.status！==200) {
归还这个message.error(修改参数名称失败)
}
this.editDialogVisible=false
this.getParamsData()
这个message.success(修改参数名称成功!)
})
},
//监视标签标签的关闭事件，即删除对应的参数明细项
handleClose() {
row.attr_vals.splice(i，1)
//更新参数的明细
this.updateParamsDetail(row)
},
//标签显示文本输入框
showInput(row) {
row.inputVisible=true
这个. nextTick((_)={
//点击新增按钮后输入框获取焦点ref=saveTagInput
这个参考文献。保存标签输入。$参考文献。输入。焦点()
})
},
//文本框失去焦点或按下进入按键
handleInputConfirm(第行){
if (row.inputValue.trim()) {
划。属性_ vals。推(排。输入值。trim())
//更新参数的明细
this.updateParamsDetail(row)
}
row.inputVisible=false
//执行完一次（输入或者失去焦点)清空，这样就不会执行上面的如果
row.inputValue=
},
//更新参数的明细
async updateParamsDetail(row) {
const { data: res }=等待此消息. http。放(` categories/$ { this。cateid }/attributes/$ { row。attr _ id } `)，{
属性名：行属性名，
属性选择：行属性选择，
attr_vals: row.attr_vals.join(，)，
})
if (res.meta.status！==200) {
归还这个message.error(更新参数明细失败)
}
这个message.success(更新参数明细成功!)
},
},
计算值：{
//当前选中的三级分类的编号
cateId() {
返回this.selectdKeys.length===3？this.selectdKeys[2]:空
},
//是否禁用按钮
btnDisabled() {
返回this.selectdKeys.length===3？假：真
},
//添加对话框标题
title() {
返回this.activeName===many ？动态参数 : 静态属性
},
},
}
/脚本
style lang=less 范围。cat_select {
边距：15px 0；
}。埃尔标签{
边距：10px
}。输入-新标签{
宽度：120像素
}
/风格
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。