2. 程式人生 > 其它 >VXE-Table 大致元件

VXE-Table 大致元件

阿新 • • 發佈：2021-10-28

VXE-Table

Install

  1. 專案安裝

    // npm install xe-utils@3 vxe-table@3

import Vue from 'vue'
import 'xe-utils' 
// 全部引入
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

Vue.use(VXETable)

  2. 單頁面

    <!-- 引入樣式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css">
<!-- 引入指令碼 -->
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>

按需載入

專案引入時可選擇按需載入元件和樣式

https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/use

圖示

圖示樣式表：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/icons

圖示：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/module/icon

使用：

<i class="vxe-icon--caret-top"></i>

顏色變數

修改顏色變數官方連結：

https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/theme

// 引入全域性變數
@import 'vxe-table/styles/variable.scss';
// 修改樣式變數
$vxe-font-size: 14px;
$vxe-font-color: #666;
// ...
// 引入全部模組樣式
@import 'vxe-table/styles/modules.scss';

vxe-table

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/table/api

vxe-colgroup

表格列組，常用於總標題和子標題

vxe-column

表格列

<vxe-table border show-footer show-header-overflow highlight-hover-row height="500"
    :footer-method="footerMethod" :data="tableData2" 
    :tooltip-config="{contentMethod: showTooltipMethod, enterable: true}">
    <vxe-colgroup title="基本資訊">
        <vxe-colgroup field="rate" show-header-overflow="title">
            <template #header>
                <span>標題溢位顯示原生 title xxxxxxxxxxxxxxxxxxxxxxxxxxx</span>
             </template>
         </vxe-colgroup>
         <vxe-colgroup title="詳細資訊">
             <vxe-column type="html" field="address" title="標題溢位顯示tooltip內容內容內容內容內容內容" width="160" show-header-overflow show-overflow></vxe-column>
         </vxe-colgroup>
    </vxe-colgroup>
</vxe-table>

vxe-grid

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/grid/api

<vxe-grid v-bind="gridOptions"></vxe-grid>
<script>
    export default {
          data () {
            return {
              gridOptions: {
              border: true,
              resizable: true,
              height: 530,
              rowId: 'id',
              pagerConfig: {
                  pageSize: 10 // 預設每頁大小
              },
              checkboxConfig: {
                reserve: true // 設定複選框支援分頁勾選，需要設定 rowId 行資料主鍵
              },
              proxyConfig: {
                seq: true, // 啟用動態序號代理（分頁之後索引自動計算為當前頁的起始序號）
                props: {
                  // 自定義響應結果讀取的欄位，例如返回結果為：{result: [], page: {total: 10}}
                  result: 'result',
                  total: 'page.total'
                },
                ajax: {
                  // 接收 Promise
                  query: ({ page }) => {
                    return new Promise(resolve => {
                      setTimeout(() => {
                        const list = [
                          { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
                          { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
                          { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
                          { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
                          { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
                          { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 21, address: 'Shenzhen' },
                          { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 29, address: 'vxe-table 從入門到放棄' },
                          { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen' },
                          { id: 10009, name: 'Test9', nickname: 'T9', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen' },
                          { id: 100010, name: 'Test10', nickname: 'T10', role: 'Develop', sex: 'Man', age: 35, address: 'Guangzhou' },
                          { id: 100011, name: 'Test11', nickname: 'T11', role: 'Test', sex: 'Women', age: 26, address: 'vxe-table 從入門到放棄' },
                          { id: 100012, name: 'Test12', nickname: 'T12', role: 'Develop', sex: 'Man', age: 34, address: 'Guangzhou' },
                          { id: 100013, name: 'Test13', nickname: 'T13', role: 'Test', sex: 'Women', age: 22, address: 'Shenzhen' }
                        ]
                        resolve({
                          page: {total: list.length},
                          result: list.slice((page.currentPage - 1) * page.pageSize, page.currentPage * page.pageSize)
                        })
                      }, 100)
                    })
                  }
                }
              },
              columns: [
                { type: 'checkbox', width: 50 },
                { type: 'seq', width: 60 },
                { field: 'name', title: 'Name' },
                { field: 'nickname', title: 'Nickname' },
                { field: 'role', title: 'Role' },
                { field: 'address', title: 'Address', showOverflow: true }
              ]
            }
          }
        }
</script>

vxe-button

按鈕帶邊框，純文字按鈕，下拉按鈕

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/button/api

<vxe-button status="success" transfer>
    <template #default>成功顏色</template>
    <template #dropdowns>
        <vxe-button type="text">下拉按鈕1</vxe-button>
        <vxe-button type="text" status="my-success">下拉按鈕2</vxe-button>
        <vxe-button type="text">下拉按鈕3</vxe-button>
    </template>
</vxe-button>

<style>
    .my-success{color: green;}
</style>

vxe-radio

vxe-radio-group

按鈕組，可以把一組單選按鈕包裹起來用以區分

vue-radio-button

按鈕形式的單選按鈕

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/radio/api

<vxe-radio-group v-model="value4">
    <vxe-radio-button label="1" content="按鈕1"></vxe-radio-button>
    <vxe-radio-button label="2" content="按鈕2"></vxe-radio-button>
</vxe-radio-group>

vxe-checkbox

vxe-checkbox-group

按鈕組，可以把一組複選框按鈕包裹起來用以區分

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/checkbox/api

<vxe-checkbox-group v-model="value12">
    <vxe-checkbox label="1" content="HTML" indeterminate></vxe-checkbox>
    <vxe-checkbox label="2" content="CSS" indeterminate></vxe-checkbox>
</vxe-checkbox-group>

vxe-switch

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/switch/api

<vxe-switch v-model="value5" open-label="開" open-value="Y" close-label="關" close-value="N"></vxe-switch>

vxe-input

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/input/api

<vxe-input v-model="value201" placeholder="帶圖示" type="search" prefix-icon="fa fa-user" suffix-icon="fa fa-search" clearable></vxe-input>

vxe-textarea

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/textarea/api

<vxe-textarea v-model="value9" placeholder="自適應文字高度" :autosize="{ minRows: 2, maxRows: 4 }"></vxe-textarea>

vxe-select

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/select/api

vxe-optgroup

下拉選項組

vxe-option

下拉選項

<vxe-select v-model="value23" placeholder="分組" clearable transfer>
    <vxe-optgroup label="選項2">
        <vxe-option value="2-1" label="選項2-1"></vxe-option>
        <vxe-option value="2-2" label="選項2-2"></vxe-option>
    </vxe-optgroup>
    <vxe-optgroup label="選項3">
        <vxe-option value="3-1" label="選項3-1"></vxe-option>
    </vxe-optgroup>
</vxe-select>

vxe-pulldown

<vxe-pulldown ref="xDown4" transfer>
    <template #default>
         <vxe-input v-model="value4" suffix-icon="fa fa-search" placeholder="實現下拉分頁表格" @keyup="keyupEvent4" @focus="focusEvent4" @suffix-click="suffixClick4"></vxe-input>
    </template>
    <template #dropdown>
        <div class="my-dropdown4">
            <vxe-grid border highlight-hover-row auto-resize height="auto"
                  :loading="loading4" :pager-config="tablePage4"
                  :data="tableData4" :columns="tableColumn4"
                  @cell-click="cellClickEvent4"  @page-change="pageChangeEvent4">
            </vxe-grid>
        </div>
    </template>
</vxe-pulldown>

vxe-pager

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/pager/api

vxe-table + vxe-pager

https://xuliangzhan_admin.gitee.io/vxe-table/#/table/module/pager

<vxe-pager :current-page.sync="page4.currentPage" :page-size.sync="page4.pageSize"
    :total="page4.totalResult"
    :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
</vxe-pager>

vxe-toolbar

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/toolbar/api

vxe-table + vxe-toolbar

https://xuliangzhan_admin.gitee.io/vxe-table/#/table/module/toolbar

<vxe-toolbar perfect>
    <template #buttons>
        <vxe-button icon="fa fa-plus" status="perfect" content="新增"></vxe-button>
        <vxe-button icon="fa fa-trash-o" status="perfect" content="刪除"></vxe-button>
        <vxe-button icon="fa fa-save" status="perfect" content="儲存"></vxe-button>
     </template>
     <template #tools>
         <vxe-button type="text" icon="vxe-icon--question" class="tool-btn"></vxe-button>
         <vxe-button type="text" icon="vxe-icon--funnel" class="tool-btn" @click="funnelEvent"></vxe-button>
    </template>
</vxe-toolbar>

vxe-form

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/form/api

vxe-form-gather

表單列容器，span表示柵格佔據的列數（共 24 分欄）

vxe-form-item

表單項

<vxe-form title-colon ref="xForm" title-align="right" title-width="100"
    :data="formData2" :rules="formRules2" :loading="loading2"
    @submit="submitEvent2" @reset="resetEvent">
    <vxe-form-gather span="12">
        <vxe-form-item title="名稱" field="name" span="24"></vxe-form-item>
        <vxe-form-item title="暱稱" span="24">
            <template #title>
                <span style="color: red;">自定義標題</span>
            </template>
            <template #default="{ data }">
                <span>自定義 {{ data.nickname }}</span>
            </template>
        </vxe-form-item>
    </vxe-form-gather>
    <vxe-form-gather span="12">
        <vxe-form-item title="標題貌似有點長呢標題貌似有點長呢" field="address" span="24" :item-render="{}">
            <template #default="params">
                <vxe-textarea v-model="params.data.address" placeholder="請輸入地址" :autosize="{minRows: 6, maxRows: 10}" clearable @input="$refs.xForm.updateStatus(params)"></vxe-textarea>
            </template>
        </vxe-form-item>
    </vxe-form-gather>
</vxe-form>

vxe-list

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/list/api

（注：必須固定容器高度和行高）

<vxe-list height="240" class="my-tree" :loading="loading6" :data="list6">
    <template #default="{ items }">
        <div class="my-tree-item" v-for="item in items" :key="item.id" :class="[`level-${item._LEVEL}`, {'has-child': item._HAS_CHILDREN, 'is-expand': item._EXPAND}]" :style="{paddingLeft: `${item._LEVEL * 20}px`}">
            <i class="tree-icon fa fa-chevron-right" @click="toggleTreeNode(item)"></i>
            <span class="tree-label">{{ item.label }}</span>
        </div>
    </template>
</vxe-list>

vxe-modal

https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/modal/api

<!-- JS -->
<vxe-button content="不允許重複點選" @click="$XModal.message({ content: '不允許重複點選', id: 'unique1' })"></vxe-button>
<!-- HTML -->
<vxe-modal v-model="value11" id="myModal6" width="800" height="400" min-width="460" min-height="320" show-zoom resize remember storage transfer>
    <template #title>
        <span style="color: red;">完整功能的視窗（移動、拖動、狀態儲存）</span>
        <span style="color: red;">通過設定 transfer 將彈框容器插入 body</span>
    </template>
    <template #default>
        <vxe-grid border resizable show-overflow auto-resize height="auto"
            :pager-config="tablePage" :proxy-config="tableProxy"
            :columns="tableColumn" :toolbar-config="tableToolbar"></vxe-grid>
    </template>
</vxe-modal>

相關推薦

VXE-Table 大致元件

VXE-Table Install 專案安裝 // npm install xe-utils@3 vxe-table@3 import Vue from \'vue\' import \'xe-utils\'

vxe-table中如何用slots嵌入element-ui元件

在使用vxe-table元件時，常用的方法就是在columns中使用editRender來引入element-ui的一些元件，但侷限性很大，只能使用有限規定的幾個元件，如input, textarea, select, $input, $select, $switch，而使用slots插槽

vxe-table中<vxe-grid>元件中表格資料更新問題

當使用<vxe-grid>元件時，利用sort()方法對某一列進行資料的實時排序，由於每次排序時都是對初始時的資料排序(即使資料變化了也是對初始時的資料進行排序)，因此不能夠進行實時排序。若要進行實時排序，需要對

封裝Vue Element的table表格元件

上週分享了幾篇關於React元件封裝方面的博文，這周就來分享幾篇關於Vue元件封裝方面的博文，也好讓大家能更好地瞭解React和Vue在元件封裝方面的區別。

封裝Vue Element的table表格元件的示例詳解

上週分享了幾篇關於React元件封裝方面的博文，這周就來分享幾篇關於Vue元件封裝方面的博文，也好讓大家能更好地瞭解React和Vue在元件封裝方面的區別。

element-table表格元件分頁後完整匯出到excel的方法

首先表格匯出需要使用到js-xlsx庫，vue通過npm install xlsx安裝後使用important XLSX from \'xlsx\'匯入

angular中table表格元件的使用

1.搜尋功能的實現 table元件中有屬性 [data]=\"data\"傳遞給表格的資料，表格根據column中的配置來顯示data中的資料

改變vxe-table或element-ui 表格第一行或某一行樣式

技術標籤：vuetablevue 關鍵點：給表格新增屬性 :cell-style=“cellStyle” cellStyle(row, column, rowIndex, columnIndex) {

vxe-table 遍歷單選radio

技術標籤：前端 vxe-table 遍歷單選radio 效果圖 html程式碼 <vxe-table-column field="valuationWay" title="計價方式" width="20%">

LabWindows中Table控制元件的下拉列的設定

技術標籤：LabWindowtableATTR_DIMMEDcombobox隱藏 1 先看樣式 2 樣式設定，雙擊table，新增列以後，編輯列，選擇 Combo box

element-ui封裝一個Table模板元件的示例

大家在做後臺管理系統的時候，寫的最多的可能就是表格頁面了，一般分三部分：搜尋功能區、表格內容區和分頁器區。一般這些功能都是使用第三方元件庫實現，比如說element-ui，或者vuetify。這兩個元件庫都各有各的優點

vxe-table show-overflow在modal失效問題

技術標籤：工具cssvue.jsvxe-table 在使用的過程中發現vxe-table在普通介面是生效，但是在iview的modal框始終不出現

Vue中的vxe-table基本使用教程2

技術標籤：vue 脫離Vue專案環境和Vue伺服器，直接CDN匯入檔案，線上執行。 注意：vue、xe-utils、vxe-table必須在開頭就匯入，而我們自定義的main.js需要放在最後匯入，這樣才能把資料載入到頁面，而main.css在開

vue中vxe-table的使用教程1

技術標籤：vue 注意：此篇是在Vue專案中執行的，後期全部都線上執行，不在依賴本地Vue專案環境，直接依賴CDN中的檔案即可

Vue中的vxe-table教程5-列寬拖動、高度自適應、頁尾追加聚合統計行

技術標籤：vxe-table 知識點： 顯示或隱藏表頭表格列寬拖動表格高度自適應可以設定表格最大高度值頁尾追加量兩行，一行平均值、一行求和

Vue中的vxe-table教程4-水平滾動條、凍結列、頁尾追加聚合統計

技術標籤：vxe-table 知識點： 水平滾動條的設定左邊凍結列的設定頁尾加一行對指定列進行求和的設定

Vue中的vxe-table教程19-表單的使用

技術標籤：vxe-table 效果圖： 1. index.html程式碼 <!DOCTYPE html> <html lang="en">

Vue中的vxe-table教程18-工具欄新增、刪除、儲存、列顯示與隱藏

技術標籤：vxe-table 效果圖： 1. index.html程式碼 <!DOCTYPE html> <html lang="en">

封裝一個elementuI的table表格元件

技術標籤：elementUI 一、封裝的表格元件 <template> <div> <el-row> <el-col :span="24">

如何封裝Vue Element的table表格元件

在封裝Vue元件時，我依舊會交叉使用函式式元件的方式來實現。關於函式式元件，我們可以把它想像成元件裡的一個函式，入參是渲染上下文(render context)，返回值是渲染好的HTML(VNode)。它比較適用於外層元件僅僅是對