Vuetify xuất sang excel
|
Phương thức được triển khai trong thành phần này sử dụng các bảng HTML để vẽ. xls, Microsoft Excel không còn nhận ra HTML là nội dung gốc nên sẽ nhắc thông báo cảnh báo trước khi mở tệp. Nội dung sẽ được hiển thị hoàn hảo nhưng không thể tránh khỏi thông báo Show
Plugin Vue2 để hiển thị và chỉnh sửa mảng đối tượng theo kiểu Excel. Nó hỗ trợ các tính năng sau
Đối với phiên bản Vue 3, vui lòng tham khảo https. //github. com/cscan/vue3-excel-editor Bắt đầuNhận gói hàng npm install vue-excel-editor Đăng ký VueExcelEditor trong điểm vào ứng dụng của bạn import Vue from 'vue' import VueExcelEditor from 'vue-excel-editor' Vue.use(VueExcelEditor) Trong mẫu của bạn <template> <vue-excel-editor v-model="jsondata"> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template> Quan điểmDanh sách đạo cụThành phần chống đỡ. vue-excel-editorNameMandatoryTypeDescriptionv-modelMandatoryArrayDữ liệu đã chỉnh sửa trong Array Of ObjectpageOptionalNumberKích thước trang cụ thể, mặc định là tự động tính toán theo chiều cao màn hìnhno-pagingOptionalBooleanDisable tính năng phân trang, mặc định là falseno-num-colOptionalBooleanNo number column, default is falsefilter-rowOptionalBooleanShow fixed filter row, default is falseno-footerOptionalBooleanNo footer row . Mặc định là 200rememberOptionalBooleanGhi nhớ cài đặt trong localStorage, mặc định là falseenterToSouthOptionalBooleanDi chuyển ô xuống dưới cùng thay vì sang phải khi nhấn enterallow-add-colOptionalBooleanCho phép hiển thị nút thêm cột trong khi thay đổi kích thước cộtadd-columnOptionalFunctionFunc để trả về định nghĩa cột khi cột được thêmno-header-editOptionalBooleanKhông cho phépThành phần chống đỡ. vue-excel-columnNameMandatoryTypeDescriptionfieldMandatoryStringField name, row object keylabelOptionalStringHeader label, default is field nametypeOptionalStringThe column typereadonlyOptionalBooleanRead-only, default is parent prop. readonlyinit-styleOptionalObjectCell kiểu ban đầu trong cssstickyOptionalBooleanCột cố định ở bên trái của bảng, không có phản hồi khi cuộn nganginvisibleOptionalBooleanColumn khả năng hiển thị, mặc định là falsewidthOptionalStringSpecified chiều rộng cột, mặc định là '100px'autoFillWidthOptionalBooleanMở rộng chiều rộng của cột này để lấp đầy chiều rộng của trình chỉnh sửa, mặc định là falsechangeOptionalFunction@The function . autocompleteposOptionalNumberSpecified column sequencetext-transformOptionalStringBuộc đầu vào thành chữ hoa hoặc chữ thường khi chỉnh sửatext-alignOptionalStringCăn chỉnh văn bản, mặc định là 'left'optionsOptionalArray, Function@For type = 'select', xác định các tùy chọn có thể chọn trong arrayoptionsOptionalObject, FunctionFor type = 'map', xác định tùy chọn có thể chọn . 'tổng', 'trung bình', 'tối đa', 'tối thiểu'. Mặc định là nullsortOptionalFunctionHàm tùy chỉnh để sắp xếp cộtlinkOptionalFunctionHàm phản ứng với nhấp chuột thay thế trên ô textto-textOptionalFunctionHàm chuyển đổi từ giá trị đối tượng thành văn bản chỉnh sửa thành giá trịOptionalFunctionHàm chuyển đổi từ văn bản chỉnh sửa thành giá trị đối tượng@ - Chức năng có thể trả lại một lời hứa loại cộtLoạiGiá trịHiển thị văn bảnBiện minhValidationCho phép PhímCho phép NullstringstringstringleftnoneallYnumbernumericnumericrightnone-. 0123456789Yselectarraystringleftvalue với các tùy chọnallYmaphashstringleftvalue với các tùy chọnallYcheck101 hoặc 01 hoặc 0centernone1 hoặc 0YcheckYNY hoặc NY hoặc NcenternoneynYNYcheckTFT hoặc FT của FcenternonetfTFYdateyyyy-mm-ddyyyy-mm-ddleftvalid datenoneYdatetimeyyyy-mm-dd hh. mnyyyy-mm-dd hh. mnleftvalid datetimenoneYdatetimesecyyyy-mm-dd hh. mn. ssyyyy-mm-dd hh. mn. ssleftvalid datetimesecnoneYdatetickunix timestampyyyy-mm-ddleftvalid datenoneYdatetimetickunix timestampyyyy-mm-dd hh. mnleftvalid datetimenoneYdatetimesectickunix timestampyyyy-mm-dd hh. mn. ssleftvalid datetimesecnoneYDanh sách phím nóngTênĐiều kiệnMô tảCtrl/Meta ATable FocusChọn tất cả các hàngCtrl/Meta Ccell FocusChọn văn bản ô vào clipboardCtrl/Meta VCell FocusĐặt văn bản trong bảng tạm vào ôCtrl/Meta ZTable FocusHoàn tác cập nhật cuối cùngCtrl/Meta FTable FocusBật lên hộp thoại "Tìm"Ctrl/Meta GSau khi TìmTiếp tục tìm văn bảnCtrl/Danh sách sự kiệnThành phần sự kiện. vue-excel-editorNameArguemntsDescriptionupdateupdateItemArrayCập nhật thông tin ôxóaxóaItemArrayXóa thông tin hàngselectselectIdArray, directionEmit khi các hàng được chọn/không được chọncell-clickrowPos, colPosEmit khi một ô được nhấp vào trước focuscell-focus{rowPos, colPos, cell, rec}Phát ra khi một ô có focuspage-changedpageTopPos, pageBottomPosEmit khi trang đã thay đổi settingsettingEmitDanh sách phương phápthành phần phương pháp. vue-excel-editorTênĐối sốMô tảTrang đầuChuyển đến trang đầu tiênTrang cuốiChuyển đến trang cuốitrướcTrangChuyển về trang trướctiếp theoTrangChuyển sang trang tiếp theoChuyển về phía BắcChuyển ô con trỏ xuống ô phía trênDi chuyển phía NamChuyển ô con trỏ xuống ô phía dướidi chuyểnTâyChuyển ô con trỏ về ô trước đódi chuyểnĐôngChuyển ô con trỏ sang ô tiếp theodi chuyểnTorow, col*Di chuyển ô con trỏ tới ô* = đối số tùy chọn Danh sách biếnThành phần biến. vue-excel-editorTênLoạiMô tảxử lýBooleanThành phần bận hay khôngtrangTopNumberSố hàng trên cùng của trang hiện tạiSizeNumberSố lượng hàng của mỗi trường trangAOONó chứa thông số cột được tạo khi mountfilterColumnObjectChứa các bộ lọc hiện tại, nhà phát triển có thể truy cập chuỗi bộ lọc qua bảng nàyAOONó chứa các bản ghi được lọc đã chọnĐối tượngChứa tất cả các hàng đã chọn, khóa là hàngAOA = Mảng của Mảng, i. e. [[. ], [. ]] Tôi cho rằng bạn chỉ cố gắng đọc tất cả các biến trên. Đừng cố sửa đổi bất kỳ giá trị nào của các biến trên, trừ khi bạn xem kỹ các mã và biết hậu quả Ví dụMột ví dụ để hiển thị bảng 5x6 <template> <vue-excel-editor v-model="jsondata" filter-row> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template> Lưu ý rằng thành phần sẽ đọc vue-excel-column khi nó được tạo. Bạn cũng có thể bỏ qua tất cả các định nghĩa cột. Điều khiển sẽ giúp bạn "đoán" phần còn lại <template> <vue-excel-editor v-model="jsondata" filter-row /> template> Dữ liệu mẫu chứa 5 bản ghi export default { name: 'app', data: { jsondata: [ {user: 'hc', name: 'Harry Cole', phone: '1-415-2345678', gender: 'M', age: 25, birth: '1997-07-01'}, {user: 'sm', name: 'Simon Minolta', phone: '1-123-7675682', gender: 'M', age: 20, birth: '1999-11-12'}, {user: 'ra', name: 'Raymond Atom', phone: '1-456-9981212', gender: 'M', age: 19, birth: '2000-06-11'}, {user: 'ag', name: 'Mary George', phone: '1-556-1245684', gender: 'F', age: 22, birth: '2002-08-01'}, {user: 'kl', name: 'Kenny Linus', phone: '1-891-2345685', gender: 'M', age: 29, birth: '1990-09-01'} ] } } Làm việc với redis để tiết kiệmBạn có thể ghi lại sự kiện @delete và @update để lưu mục đích <vue-excel-editor v-model="jsondata" @delete="onDelete" @update="onUpdate"> <vue-excel-column field="user" label="User ID" type="string" width="80px" key-field /> ... vue-excel-editor> "Trường khóa" được chỉ định là cần thiết, nó sẽ phản ánh trong rec. các phím sau methods: { onDelete (records) { records = records.map(rec => ['del', rec.keys.join()]) redis.multi(records).exec() }, onUpdate (records) { records = records.map(rec => ['hset', rec.keys.join(), rec.name, rec.newVal]) redis.multi(records).exec() } } hàng mớiĐặt tham chiếu theo ref=". " ________số 8 methods: { newRecord () { const rec = { user: 'nm', name: 'Norman Morris', phone: '1-222-3333333', gender: 'M', age: 28, birth: '1993-05-16' } // Call this to new record this.$refs.grid.newRecord(rec) } } Sau khi bản ghi được tạo, một tập hợp các sự kiện @update sẽ được kích hoạt. Nếu bạn hoàn tác một giao dịch newRecord, thành phần sẽ tạo các sự kiện @delete tương ứng. Trong trường hợp bạn không quan tâm đến việc hoàn tác, bạn có thể bỏ qua bước này bằng cách thêm trực tiếp bản ghi mới vào biến mô hình v (mảng jsondata) Xóa hàngimport Vue from 'vue' import VueExcelEditor from 'vue-excel-editor' Vue.use(VueExcelEditor)0 Thành phần sẽ tạo ra các sự kiện @delete tương ứng. Bạn cũng có thể quan tâm đến phương thức deleteSelectedRecords() Ghi nhớ cài đặt lướiCài đặt lưới như chiều rộng cột và nhãn cột có thể được lưu trong localStorage của trình duyệt máy khách bằng chỗ dựa "ghi nhớ" được chỉ định import Vue from 'vue' import VueExcelEditor from 'vue-excel-editor' Vue.use(VueExcelEditor)1 Bạn cũng có thể nắm bắt sự kiện @setting để xử lý các chi tiết cụ thể hơn Thay đổi nhãn cộtBạn có thể chỉ định nhãn cột trong vue-excel-column label prop. Tuy nhiên, nó sẽ tồn tại sau khi gắn kết. Nếu bạn muốn thay đổi nhãn cột sau khi gắn kết, bạn có thể thử cập nhật các trường biến. Ví dụ import Vue from 'vue' import VueExcelEditor from 'vue-excel-editor' Vue.use(VueExcelEditor)2 Thay đổi ẩn cộtTương tự như nhãn cột, bạn có thể làm cho cột hiển thị/ẩn trong vue-excel-column label prop. Tuy nhiên, nó sẽ tồn tại sau khi gắn kết. Nếu bạn muốn thay đổi nó sau khi mount, bạn có thể thử cập nhật các trường biến. Ví dụ import Vue from 'vue' import VueExcelEditor from 'vue-excel-editor' Vue.use(VueExcelEditor)3 xuất nội dungSau đây cung cấp nút để xuất nội dung lưới import Vue from 'vue' import VueExcelEditor from 'vue-excel-editor' Vue.use(VueExcelEditor)4 import Vue from 'vue' import VueExcelEditor from 'vue-excel-editor' Vue.use(VueExcelEditor)5 Lưu ý rằng chỉ có định dạng xlsx hỗ trợ nén Làm điều gì đó khi người dùng chọn/bỏ chọn các hàngCác hàng được chọn hoặc không được chọn sẽ được chuyển đến phương thức kích hoạt được cung cấp import Vue from 'vue' import VueExcelEditor from 'vue-excel-editor' Vue.use(VueExcelEditor)6 import Vue from 'vue' import VueExcelEditor from 'vue-excel-editor' Vue.use(VueExcelEditor)7 Bạn cũng có thể muốn xem số bản ghi đã chọn để hiển thị các nút hành động. Ví dụ import Vue from 'vue' import VueExcelEditor from 'vue-excel-editor' Vue.use(VueExcelEditor)8 import Vue from 'vue' import VueExcelEditor from 'vue-excel-editor' Vue.use(VueExcelEditor)9 Làm gì đó khi người dùng thay đổi nội dung ôBạn có thể đạt được điều này bằng cách đặt phương thức thay đổi chỗ dựa <template> <vue-excel-editor v-model="jsondata"> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>0 <template> <vue-excel-editor v-model="jsondata"> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>1 Chức năng thay đổi có thể trả lại một lời hứa <template> <vue-excel-editor v-model="jsondata"> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>2 <template> <vue-excel-editor v-model="jsondata"> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>3 Tuy nhiên, thói quen hứa hẹn có thể khiến trang web của bạn có hiệu suất thấp. Tôi khuyên bạn nên sử dụng một chỗ dựa xác thực để hiển thị nội dung sai trong lưới có lỗi xác thực Các tính năng khác<template> <vue-excel-editor v-model="jsondata"> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>4 Bộ lọc + Hàng chân trangChỗ dựa hàng bộ lọc được chỉ định để hiển thị hàng bộ lọc <template> <vue-excel-editor v-model="jsondata"> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>5 Nếu bạn không muốn hiển thị chân trang, hãy chỉ định chỗ dựa không có chân trang <template> <vue-excel-editor v-model="jsondata"> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>6 lọcBộ lọc là một trong những tính năng tập trung. Nó hỗ trợ biểu thức chính quy và cú pháp thẻ đại diện của windows Component supports the prefx likes <, >, =, >=, <=, <>, ~ (regular expression) and wild-card * and ? symbol. Examples: Ví dụMô tảabcCác giá trị chứa ABCabc*Các giá trị bắt đầu bởi ABC*abcCác giá trị kết thúc bởi ABC=abcCác giá trị bằng ABC<>abcCác giá trị không bằng ABC>= 100Các giá trị lớn hơn hoặc bằng 100< 0Các giá trị nhỏ hơn 0po-18 . Các giá trị không trống ~. *tpx[ ]+ckCác giá trị có văn bản TPX và CK và chúng có khoảng trắng ở giữa~[ ]Các giá trị chứa khoảng trắng~^vậy. ary$Các giá trị bắt đầu bởi SO hoặc kết thúc bởi ARY~[ ]+$. ^[ ]+Các giá trị bắt đầu hoặc kết thúc bởi dấu cách~^[^ ]*$Các giá trị không có khoảng trắngLưu ý rằng tất cả các bộ lọc đều không phân biệt chữ hoa chữ thường Sắp xếpCó thể gán chức năng sắp xếp tùy chỉnh cho cột được chỉ định <template> <vue-excel-editor v-model="jsondata"> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>7 <template> <vue-excel-editor v-model="jsondata"> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>8 tự động hoàn thànhKhi người dùng nhập văn bản vào ô và giữ một giây, thành phần sẽ hiển thị 10 lần xuất hiện phù hợp để người dùng lựa chọn. Tùy chọn<template> <vue-excel-editor v-model="jsondata"> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>9 Đã chỉ định loại = "chọn" cho cột Tùy chọn. Điều này hoạt động giống như Tự động điền, nhưng danh sách được cung cấp và cố định. Bản đồCột được nhập "bản đồ" giống như cột được nhập "chọn", nhưng giá trị bản ghi không giống với văn bản hiển thị. Các tùy chọn chống đỡ cần thiết để cung cấp ánh xạ của giá trị và văn bản <template> <vue-excel-editor v-model="jsondata" filter-row> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>0 Lựa chọnNhấp vào nhãn hàng để chọn hàng. Thành phần này hỗ trợ kiểu Excel sử dụng tổ hợp Shift-click và Ctrl-click (Meta cho OSX) để chọn nhiều hàng. Bạn cũng có thể quan tâm đến tùy chọn chọn tự do để chọn nhiều hàng mà không cần giữ phím shift Đa cập nhậtKhi người dùng cập nhật bất kỳ ô nào trong khi chọn nhiều hàng, tất cả các ô trong cùng một cột của các hàng đã chọn đó sẽ được cập nhật cột dính<template> <vue-excel-editor v-model="jsondata" filter-row> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>1 "Dính" được chỉ định có nghĩa là cột được chỉ định bị cố định khi cuộn ngang. Nhiều khả năng các cột cố định nằm ngoài cùng bên trái phân trang<template> <vue-excel-editor v-model="jsondata" filter-row> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>2 Để đạt được hiệu suất tốt hơn, tôi khuyên bạn nên sử dụng phân trang bằng cách không chỉ định chỗ dựa "không phân trang". Thành phần tự động tính toán kích thước trang sau khi phát hiện ranh giới bên ngoài đã thay đổi kích thước. Nếu bạn muốn đặt kích thước trang theo cách thủ công, hãy thử prop "page". Nếu phát hiện nhiều hơn 1 trang, chân trang (thanh cuộn ngang) sẽ hiển thị các liên kết đầu tiên/trước/tiếp theo/cuối cùng để điều hướng trang. Bạn có thể tùy chỉnh các liên kết này bằng chỗ dựa "nhãn được bản địa hóa" Thẩm địnhSau đây là để xác nhận cột <template> <vue-excel-editor v-model="jsondata" filter-row> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>3 <template> <vue-excel-editor v-model="jsondata" filter-row> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>4 Sau đây là để xác nhận hàng. Nó sẽ được kích hoạt cho bất kỳ thay đổi nào. Thông báo lỗi sẽ được hiển thị ở cột số <template> <vue-excel-editor v-model="jsondata" filter-row> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>5 <template> <vue-excel-editor v-model="jsondata" filter-row> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>6 Bạn có thể muốn nhận lỗi xác thực. Thành phần sẽ phát ra sự kiện "lỗi xác thực" nếu lỗi xác thực hàng hoặc trường thay đổi <template> <vue-excel-editor v-model="jsondata" filter-row> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>7 <template> <vue-excel-editor v-model="jsondata" filter-row> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>8 Tóm lược<template> <vue-excel-editor v-model="jsondata" filter-row> <vue-excel-column field="user" label="User ID" type="string" width="80px" /> <vue-excel-column field="name" label="Name" type="string" width="150px" /> <vue-excel-column field="phone" label="Contact" type="string" width="130px" /> <vue-excel-column field="gender" label="Gender" type="select" width="50px" :options="['F','M','U']" /> <vue-excel-column field="age" label="Age" type="number" width="70px" /> <vue-excel-column field="birth" label="Date Of Birth" type="date" width="80px" /> vue-excel-editor> template>9 Tóm tắt prop hỗ trợ "sum", "min", "max", "avg" và "count" Lưu ý rằng "đếm" sẽ hướng dẫn thành phần đếm ô chứa điều kiện sau Sử dụng cẩn thận. Tính toán tóm tắt ngốn tài nguyên, vì vậy nó chỉ tính toán khi số lượng bản ghi thay đổi (i. e. Mới, xóa, lọc). Nó không tính toán lại nếu người dùng thay đổi nội dung ô. Bạn có thể kích hoạt phép tính thủ công bằng cách gọi phương thức calSummary trong sự kiện @update liên kếtĐây là một tính năng hay trong các ứng dụng doanh nghiệp. Thật ra, tôi đã học từ giao diện người dùng SAP. Khi người dùng giữ phím chức năng (ở đây là phím Alt) và di chuột qua nội dung ô, văn bản sẽ hiển thị dưới dạng liên kết. Nếu người dùng nhấp vào liên kết, chức năng tùy chỉnh của bạn sẽ được kích hoạt. Ví dụ sau đây cho thấy cách định tuyến đến trang hồ sơ người dùng bằng cách nhấp vào ô cột tên <template> <vue-excel-editor v-model="jsondata" filter-row /> template>0 <template> <vue-excel-editor v-model="jsondata" filter-row /> template>1 Chuyển đổi văn bản/giá trịĐôi khi hiển thị văn bản và giá trị cửa hàng sẽ khác nhau. Để giải quyết vấn đề này, bạn có thể sử dụng thuộc tính cột to-text và to-value |
