el-input展示多个值

以下是表格效果图AAA,BBB,CCC是测试数据，本来应该展示TA20301818ASHLR,

主推款商品选择输入框触发下拉列表，再勾选回填。

 //1.表单输入框触发下拉列表事件
 <el-form-item label="主推商品选择" prop="spmc">
          <el-input
            v-model="dataForm2.spmc"
            placeholder="请输入"
            clearable
            @focus="getPsndoc()"
          ></el-input>
</el-form-item>

el-button：确定按钮

2.多选列表
 <el-table
        :row-key="
          (row) => {
            return row.id
          }
        "
        :data="psndocList"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          label="选择"
          reserve-selection=true
        >
 </el-table>

data:{
	psndocList: []，//整个列表的数据
	multipleSelection:[], //勾选的数据
	sids:[],//新增时勾选的数据的id情况二需要传给后端
	ztkids:[]//编辑时勾选数据的id情况二

},

 watch: {
    dialogFormVisible(val) {
      if (!val) {
        this.input_ry = ''
      }
    },

    //新增时弹窗默认不回填
    salaryShow2(val) {
      if (!val) {
        this.dataForm2.id = ''
        for (var key in this.dataForm2) {
          this.dataForm2[key] = ''
        }
        this.$refs['dataForm2'].clearValidate()
      }
    },
  },

methods:{
		getPsndoc(){
			//1.此方法通过接口调用返回数据并且将数组在el-table中展示
 			this.psndocList = res.data.data
			
			 this.$nextTick(() => {
              this.ztkids.forEach((key) => { //编辑时默认回显多选的id
                this.psndocList.forEach((row) => { //列表所有数据和默认选中的对比
                  if (row.id == key) {
                    this.$refs.multipleTable.toggleRowSelection(row, true) //勾选回显
                  }
                })
              })
            })
 		},
 		
 		//2.获取默认选取表格选中的值
   		handleSelectionChange(val) {
      			this.multipleSelection = val
      			console.log(this.multipleSelection)
    	},
    	//3.el-table表格数据有多行需要做分页， el-table必须加 :row-key 和el-table-column
    	//必须加reserve-selection=true才能保留上一页的数据
    	
 		//4.行编辑按钮
   		updateBtn(row) {
			//4.编辑按钮表单回显文本 多选之后需要回显到输入框
 	 		this.dataForm2.spmc = this.multipleSelection.map((el) => el.spmc).join(',') //遍历数组中需要展示的值
			
			 //id回显的数组编辑时遍历出的数组id
     		this.ztkids = row.jcZtlbZtkVoList.map((el) => el.ztkId) //编辑时
      			console.log(this.ztkids)
		},

		//确定提交，传后端需要的是勾选的id，有多个就返回多个放入数组ids

		dataFormSubmit2(dataForm2) {
      	this.$refs[dataForm2].validate((valid) => {
        for (var i = 0; i < this.multipleSelection.length; i++) {
          if (
            this.multipleSelection[i] != undefined &&
            this.multipleSelection.length > 0
          ) {
            this.sids= this.multipleSelection.map((item) => item.id)   //新增时
          } else {
            this.sids= this.ztkids
          }
        }
         if (valid) {
			//参数
          let params = {
            ztkid: this.sids,
            ......
            }

		//调用接口传params参数........
		this.$http.post(this.$api.addJczt, params).then(({ data }) => {
		......
		})
 }



二、例举el-table某列遍历多个值
 dataList: [
        {
          id: 1,
          spdm: '4111',
          spmc: [
            {
              id: 1,
              name: 'AAAAA',
            },
            {
              id: 2,
              name: 'BBBB',
            },
            {
              id: 3,
              name: 'CCCC',
            },
          ],
        },
      ],
<el-table :data="dataList">
 <el-table-column
        prop="spmc"
        label="商品名称"
        header-align="center"
        align="center"
      >
  <template slot-scope="scope">
    <span v-for="(item, index) in scope.row.spmc" :key="index">
            {{ item.name }}
  </span>
</template>
</el-table-column>