el-autocomplete @select传参

 <el-autocomplete v-if="!isSubmit" v-model="scope.row.ProjectName"
 class="inline-input" placeholder="请输入参与项目名称"
 :fetch-suggestions="querySearch" :disabled="isSubmit"
 :title="scope.row.ProjectName" size="small" 
 @input="changeProject(scope.$index)"
 @select="((item)=>{handleSelect(item, scope.$index)})">
</el-autocomplete>

在使用element el-autocomplete组件时，选择下拉框下面的数据时，调用了handleSelect方法，但是想额外传参，使用了闭包方法

@select="((item)=>{handleSelect(item, scope.$index)})"

多表格/表头渲染/多表格多选操作技巧

多表格.png

描述：
1.表头数据来源于后台数据
2.因为以项目分，一个项目就是一个表格，所以要循环渲染多个表格
3.多个表格的渲染得到多个表格当中多个数据

实现思路

1.前后台商量后台传出的数据结构
表头

        this.ptableHead = [
          { Content: '姓名', Name: 'EmployeeName' },
          ...data.data,
          { Content: '实报工时', Name: 'RealWorkHour' },
          { Content: '工作类型', Name: 'WorkTypeName' },
          { Content: '工作内容', Name: 'Content' },
        ]

Content:为表头描述 Name：要与表格数据字段名相对应
2.表格渲染

    <div v-if="dataByP.length>0">
        <div v-for="(item,index) in dataByP " :key="index" class="pro-table">
          <div class="f-s pro">
            <div class="pro-name">{{ item.ProjectName }}</div>
            <div class="pro-hour">总工时：{{ item.TotalWorkHour }}小时</div>
          </div>
          <div class="work-table" style="margin-top:0">
            <el-table :ref="item.ProjectName" :key="item.ProjectID" style="width: 100%" border :data=" item.MyWorkHourDetList" @selection-change="handleSelectionChangeP($event,index)">
              <el-table-column type="selection" width="50" align="center" :resizable="false">
              </el-table-column>
              <template v-for="(value,tindex) in ptableHead">
                <el-table-column :key="tindex" :prop="value.Name" :label="value.Content" :width="value.Name!='Content'?'85px':'auto'" :align="value.Name!='Content'?'center':'left'" :resizable="false">
                  <template slot-scope="scope">
                    <p v-if="scope.column.property=='WorkTypeName'" style="width:100%" class="ell" :title="scope.row.WorkTypeName">{{ scope.row.WorkTypeName }}</p>
                    <p v-else-if="scope.column.property=='EmployeeName'" :title="scope.row.EmployeeName" class="ell showE" @click="show(scope.row.EmployeeID)">{{ scope.row.EmployeeName }}</p>
                    <div v-else-if="scope.column.property=='Content'" class="ell-2row " :title="scope.row.Content">
                      <span v-for="(con,cindex) in scope.row.Content " :key="cindex"> {{ con }}</span>
                    </div>
                    <span v-else-if="scope.column.property=='RealWorkHour'">
                      {{ scope.row[scope.column.property] }}
                    </span>
                    <span v-else style="font-size:16px">{{ scope.row[scope.column.property].split('/')[0] }}<span v-if="scope.row[scope.column.property].split('/')[1]>0" style="color:#333333;margin:0 3px">/</span><span v-if="scope.row[scope.column.property].split('/')[1]>0" style="color:#49AB95;display:inline-block;vertical-align: -2px;" :title="`加班${scope.row[scope.column.property].split('/')[1]}小时`"><i class="gsicon gs-icon-jiaban "></i> <span style="font-size:12px">{{ scope.row[scope.column.property].split('/')[1] }}</span></span></span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
        </div>

      </div>

{{ scope.row[scope.column.property] }} 对应于表列的:prop="value.Name"

3.多表格多选数据行

@selection-change="handleSelectionChangeP($event,index)"

所有的循环出来的表格用一个选择所触发的函数

    handleSelectionChangeP(e, index) {
      // console.log(e, index)
      this.$set(this.multipleSelection, index, e)
      let temp = 0
      this.pIds = []
      this.multipleSelection.forEach((item) => {
        temp += item.length
        item.forEach((rr) => {
          this.pIds.push({
            projectID: rr.ProjectID,
            employeeID: rr.EmployeeID,
          })
        })
      })
      this.num = temp

      //  console.log(this.pIds)
    },

打印出参数e/index/multipleSelection数组(二维数组)

1.png 2.png