表格(el-table)里面嵌套表格(el-table)

样式如下:

用到的代码:

/*这里的table是包裹表格的div的类名**/.table ::v-deep .el-table--medium .el-table__cell {padding: 0px !important;}::v-deep .params .cell {padding: 0px !important;border: none;}

一般需要嵌套表格这种情况下,后端返回的都是字符串格式的数组,需要在接收到数据后自己转化,编辑好提交的时候也需要自己把数组转为字符串格式传给后端.

// 这里list是外面表格的数据list.forEach((item, index) => {// 每一条记录的algorithmParameter原本都是字符串格式// 类似于"[{\"paramName\":\"参数2\",\"paramKey\":\"2\"}]"// 需要我们使用JSON.parse()把字符串格式转为数组格式 list[index].algorithmParameter = JSON.parse( item.algorithmParameter );});

一般在涉及到嵌套表格的情况下,新增或者编辑某条记录的时候,都会有动态增加或者删除一条输入框,大概是长下面这个样子:

相关代码:

添加**参数     删除  

// 添加一条记录addOne() {this.form.algorithmParameter.push({ paramName: "", paramKey: "" });},// 删除一条记录deleteOne(row, index) {this.form.algorithmParameter.splice(index, 1);},

关于输入框的代码参考这一篇(5条消息) el-input设置必填提示（单个&多个）_怎么吃不饱捏的博客-CSDN博客_el-input 必填