Admin.Net(vue) element-plus

效果

<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="版本" name="first">
          <el-table :data="tableData" style="width: 100%" max-height="250">
            <el-table-column prop="sortSeq" label="序号" width="120" />
            <el-table-column prop="partVer" label="版本" width="120">
              <template #default="scope">
                <el-input
                  v-model="scope.row.partVer"
                  autocomplete="off"
                  :disabled="deletedisabled(scope)"
                  @input="handpartVer"
                />
              </template>
            </el-table-column>
            <el-table-column prop="smtDevice" label="smtDevice" width="120">
              <template #default="scope">
                <el-input
                  v-model="scope.row.smtDevice"
                  autocomplete="off"
                  :disabled="deletedisabled(scope)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="routeId" label="工艺流程" width="120">
              <template #default="scope">
                <el-select
                  clearable
                  filterable
                  v-model="scope.row.routeId"
                  placeholder="请选择工艺路线"
                  :disabled="deletedisabled(scope)"
                >
                  <el-option
                    v-for="(item, index) in routeDropdownList"
                    :key="index"
                    :value="item.value"
                    :label="item.label"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="deleteRow(scope.$index)"
                  :disabled="deletedisabled(scope)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button class="mt-4" style="width: 100%" @click="onAddItem">添加</el-button>
        </el-tab-pane>
      </el-tabs>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import type { TabsPaneContext } from "element-plus";
import { getRouteDropdown } from "/@/api/xx/xx";

const partnumberId = ref();
const tableData = ref([
  {
    id: 0,
    sortSeq: 100,
    partVer: "A1",
    smtDevice: 200,
    routeId: 0,
    partnumberid:0,
  },
]);

// 打开弹窗
const openDialog = async (row: any) => {
  if (JSON.stringify(row) !== "{}") {
    partnumberId.value = row.id;
    getRouteDropdownList();
    //不等于空说明有值
    let dataInList = await getPageListVersion(row.id);
    //console.log(dataInList.data);
    tableData.value = dataInList.data.result ?? [];
    deletedisabled.value = true;
  } else {
    tableData.value = [];
  }
  ruleForm.value = JSON.parse(JSON.stringify(row));
  isShowDialog.value = true;
};
const deleteRow = (index: number) => {
  tableData.value.splice(index, 1);
};
//判断如果有值不可以删除
const deletedisabled = (scope: object) => {
  if (scope.row.id == 0) {
    return false;
  } else {
    return true;
  }
};

const onAddItem = () => {
  
  tableData.value.push({
    sortSeq: tableData.value.length + 100,
    partVer: "",
    smtDevice: 0,
    routeId: 0,
    partnumberid: partnumberId.value,
    id: 0,
  });
};

const handpartVer = (row) => {
  ruleForm.value.partVersion = row;
};
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>

按钮点击上传多张图片

效果

 <el-upload
              :limit="100" 
              v-model:file-list="fileList2"
              :show-file-list="false"
              :http-request="UpFile2"
              :auto-upload="true"
              multiple
              accept=".jpg,.jpeg,.png"
            >
              <el-button
                type="primary"
                style="margin-left: 10px"
                icon="ele-Upload"
                v-loading.fullscreen.lock="fullscreenLoading"
                >请选择图片</el-button
              >
            </el-upload>

//附件 -----------------------开始
// 图片
import { ElMessage } from "element-plus";

const fullscreenLoading = ref(false);
const fileList2 = ref<any>([]);

const UpFile2 = (data: any) => {
  fullscreenLoading.value = true;
  const formData = new FormData();
  formData.append("file", data.file);
  const reader = new FileReader();

  reader.onload = (e) => {
    var base64File = e.target.result; //e.replace(/[\r\n]/g, "")
    ruleForm.value.partFile = base64File.slice(23);
    ruleForm.value.partFilename = data.file.name;
    ruleForm.value.partFiletype = data.file.type;
    partImportFile(ruleForm.value)
      .then((res: any) => {
        fileList2.value = [];
        ElMessage.success("上传成功");
        fullscreenLoading.value = false;
      })
      .catch((err) => {
        // ElMessage.error('上传失败：' + err);
      })
      .finally(() => {
        fullscreenLoading.value = false;
      });
  };
  reader.readAsDataURL(data.file);
};
//附件 -----------------------结束