vue3+element-plus实现表格操作列，文件上传，附带当前行参数字段

只属于编码TY

于 2024-12-05 10:37:33 发布

阅读量285

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_39917320/article/details/144258612

<el-table :data="tableData" border class="main-center-content" show-overflow-tooltip>
    <el-table-column
      prop="structure_tree_name"
      label="构型名称"
      width="530"
    ></el-table-column>
    <el-table-column
      prop="structure_tree_num"
      label="构型编码"
       width="350"
    ></el-table-column>
    <el-table-column
      prop="structure_tree_version"
      label="版本号"
       width="100"
    ></el-table-column>
    <el-table-column prop="updated_at" label="时间" width="280">
      <template #default="scope">
        {{ getDateTime(scope.row.updated_at) }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <div style="display: flex;">
          <el-link
            type="primary"
            @click="handleToDetail(scope.row.structure_tree_id)"
          >
            查看
          </el-link>
          <el-upload
          :show-file-list="false"
          :before-upload="beforeAvatarUpload(scope.row.structure_tree_id)"
          :on-exceed="handleExceed"
          style="height: 32px"
        >
          <el-button style="border: none;color:#409eff;background:transparent"> 绑定</el-button>
        </el-upload>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    :current-page="pageInfo.page"
    :page-size="pageInfo.size"
    :page-sizes="pageInfo.pageSizes"
    background
    layout="->, total,  prev, pager, next, sizes"
    :total="pageInfo.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  ></el-pagination>

<script>
const upload = ref<UploadInstance>()
const fileData = ref<any>()
const fileName = ref("")
// 绑定
const handleExceed: UploadProps["onExceed"] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}

//确定上传，使用闭包获取参数
const beforeAvatarUpload = (rawDataId:any) => {
  return async (rawFile:any)=>{
    fileData.value = rawFile
    fileName.value = rawFile.name
    if(!rawFile){
      ElMessage.info("请上传文件")
      return
    }
  const fromData = new FormData()
    fromData.append("structure_tree_id", rawDataId)
    fromData.append("file", fileData.value)
    await uploadBindData(fromData)
    ElMessage.success("上传成功")
    getTableList()
    // handleClose()
    return false
  }
}


</script>