快捷導(dǎo)航

基于Vue.js的文件選擇與多選對話框組件Dccfile的使用教程

更新時間：2025年04月04日 09:59:00 作者：三線碼工

在現(xiàn)代前端開發(fā)中,Vue.js 提供了強大的組件化開發(fā)能力,使得我們可以輕松構(gòu)建復(fù)雜且可復(fù)用的用戶界面,本文將介紹一個基于 Vue.js 的文件選擇與多選對話框組件——Dccfile,并詳細解析其功能和實現(xiàn)細節(jié)

在現(xiàn)代前端開發(fā)中，Vue.js 提供了強大的組件化開發(fā)能力，使得我們可以輕松構(gòu)建復(fù)雜且可復(fù)用的用戶界面。本文將介紹一個基于 Vue.js 的文件選擇與多選對話框組件——Dccfile，并詳細解析其功能和實現(xiàn)細節(jié)。

1. 組件概述

Dccfile 是一個用于文件選擇和多選操作的對話框組件。它提供了以下功能：

搜索功能：通過文件編號或文件名稱進行篩選。
分頁展示：支持分頁查看文件列表。
多選操作：用戶可以選擇多個文件，并將其添加到“已添加”區(qū)域。
全屏模式：支持切換全屏模式以獲得更大的操作空間。
國際化支持：通過 $t 方法實現(xiàn)多語言支持。

以下是組件的主要結(jié)構(gòu)：

<template>
  <el-dialog :visible.sync="isShow" width="800px" @close="handlerClose">
    <!-- 對話框標(biāo)題 -->
    <div slot="title" class="dialog-title">
      <span>{{ title }}</span>
      <i class="s-icon" @click="fullscreen = !fullscreen"></i>
    </div>

    <!-- 主體內(nèi)容 -->
    <el-container>
      <el-main>
        <!-- 搜索表單 -->
        <el-form :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item :label="$t('task.fileNo')" prop="fileNo">
            <el-input v-model="queryParams.fileNo" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item :label="$t('task.fileName')" prop="fileName">
            <el-input v-model="queryParams.fileName" @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">{{ $t("public.search") }}</el-button>
            <el-button @click="resetQuery">{{ $t("public.reset") }}</el-button>
          </el-form-item>
        </el-form>

        <!-- 已添加文件區(qū)域 -->
        <div class="data-wrap">
          <h5>已添加:</h5>
          <div class="data-content">
            <el-tag
              v-for="(item, index) in data"
              :key="index"
              closable
              @close="removeTag(item, index)"
            >
              {{ item.filename }}
            </el-tag>
            <span v-if="data.length == 0" class="holder-select">請選擇</span>
          </div>
        </div>

        <!-- 文件表格 -->
        <el-table :data="tableData" @selection-change="selectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column :label="$t('public.serialNum')" type="index" align="center" />
          <el-table-column prop="filenumber" label="文件編號" align="center" />
          <el-table-column prop="filename" label="文件名稱" align="center" />
          <el-table-column prop="uploadname" label="上傳人" align="center" />
          <el-table-column prop="uploadtime" label="上傳時間" />
        </el-table>

        <!-- 分頁 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          layout="prev, pager, next, sizes"
          :total="total"
        />
      </el-main>

      <!-- 底部按鈕 -->
      <el-footer>
        <el-button @click="cancel">{{ $t("public.close") }}</el-button>
        <el-button type="primary" @click="submitForm">{{ $t("btn.submit") }}</el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>

2. 功能詳解

2.1 搜索功能

用戶可以通過輸入文件編號或文件名稱進行搜索。搜索結(jié)果會實時更新表格中的數(shù)據(jù)。

methods: {
  handleQuery() {
    this.queryParams.pageNum = 1;
    this.getList();
  },
  resetQuery() {
    this.resetForm("queryForm");
    this.handleQuery();
  }
}

2.2 多選操作

用戶可以在表格中選擇多個文件，并將其添加到“已添加”區(qū)域。已選擇的文件會以標(biāo)簽的形式展示，并支持刪除操作。

methods: {
  selectionChange(selection) {
    this.data = selection;
  },
  removeTag(row, index) {
    this.data.splice(index, 1);
    this.$refs.table.toggleRowSelection(row, false);
  }
}

2.3 分頁功能

表格支持分頁展示，用戶可以通過調(diào)整每頁顯示的數(shù)量或跳轉(zhuǎn)到指定頁碼來查看更多數(shù)據(jù)。

methods: {
  handleSizeChange(size) {
    this.queryParams.pageSize = size;
    this.getList();
  },
  handleCurrentChange(page) {
    this.queryParams.pageNum = page;
    this.getList();
  }
}

2.4 全屏模式

用戶可以通過點擊標(biāo)題欄中的圖標(biāo)切換全屏模式，以獲得更大的操作空間。

data() {
  return {
    fullscreen: false
  };
},
methods: {
  handlerClose() {
    this.$emit('update:visible', false);
    this.resetDialog();
  }
}

3. 使用方法

要使用該組件，只需在父組件中引入并綁定相關(guān)屬性即可：

<template>
  <Dccfile v-model="visible" :title="title" />
</template>

<script>
import Dccfile from '@/Dccfile/index.vue';

export default {
  components: { Dccfile },
  data() {
    return {
      visible: false,
      title: '選擇文件'
    };
  }
};
</script>