栏目分类
Vue+elementUI实现动态展示列表的数据
发布日期:2025-01-04 15:33 点击次数:175
Vue elementUI动态展示列表的数据
需求描述
活动查看的时候,根据后台返回的数据,动态渲染列和每行数据。
后台返回的数据结构如下
html
data定义需要用到的字段
调接口,成功后,将data.answers的值赋值给activityData.
getCol方法获取需要循环的列label和值prop
获取表格的数据
Vue elementUI注意事项
多选框对应List<object>
1.el-select标签
这个标签里对应的就是后台发过来的数据格式
如果后台发来的数据是List<String>,即["1", "2", "3"]这种格式,则这个标签里value-key="id"就可以不用加了,重点在于el-option标签的key与其对应就可以了
如果后台数据是List<object>,即[{"id": "1", "name": "一"}, {"id": "2", "name": "二"}, {"id": "3", "name": "三"}]这种格式,那么就要加上value-key="id",将list<object> 里的对象的key与el-option里的objList的key对应
2.el-option标签
key,就是用来用来作为标识对应的label,就是用来前端展示内容的value,是选完之后向后端传递数据的,如果填的是item.id那么传出的数据就只有id的数组,如果是item的话会将整个结构传出
输入框判断条件
1.格式判断
只能输入数字和两位小数
只能输入数字
可以直接在el-input 标签内加上 οnkeyup="value=value.replace(/[^\d]/g,'')" 即可
2.使用方法加入输入框格式判断数字和两位小数
入参key即为addOrEdit这个数组里面的字段名
在el-input 标签内加入:change="check_price('name')"即可
3.提交判断
即使加上以上判断后输入框提示了,但是如果提交的处理没进行判断的话还是可以提交而导致后端出错。
所以当点击提交时,应将下面的addOrEdit替换为所需数组名称,如果通过再执行提交的逻辑
自定义弹窗格式
1.const h = this.$createElement;
新建一个html内容的容器
2.this.$msgbox({}).then(() => {}).catch((err) => {});
用来新建一个弹窗
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
上一篇:哈密市进出口公司办理海关备案的资料有哪些?|石河子市|乌鲁木齐市
下一篇:校园交通