map的使用（列表的数据赋值到表单，json逗号隔开显示赋值）

小菜鸟码住

于 2022-07-01 12:01:49 发布

阅读量302

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/hfyldx/article/details/125556142

版权

 <el-table :data="zdlxList" border style="width: 100%" max-height="250">
        <el-table-column prop="zdlb" label="字段列表">
          <template #default="scope">
            <el-input v-model="scope.row.zdlb" type="textarea" placeholder="请输入字段列表" />
          </template>
        </el-table-column>
        <el-table-column prop="zdsm" label="字段说明">
          <template #default="scope">
            <el-input v-model="scope.row.zdsm" type="textarea" placeholder="请输入字段说明" />
          </template>
        </el-table-column>
        <el-table-column prop="zdlx" label="字段类型">
          <template #default="scope">
            <el-select v-model="scope.row.zdlx" :style="{ width: '100%' }" placeholder="请选择">
              <el-option
                v-for="item in zdlxTpye"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

js部分

 const aa = zdlxList.value.map(a => {
      return a.zdlx
    })
    const bb = zdlxList.value.map(a => {
      return a.zdlb
    })
    const cc = zdlxList.value.map(a => {
      return a.zdsm
    })
    data.form.fieldTypeList = aa.join(',')
    data.form.fieldList = bb.join(',')
    data.form.fieldDescList = cc.join(',')