在線電子表格,在線電子表格的制作方法

利用MVVM，很多非常復(fù)雜的前端頁面編寫起來就非常容易了。這得益于我們把注意力放在Model的結(jié)構(gòu)上，而不怎么關(guān)心DOM的操作。

本節(jié)我們演示如何利用Vue快速創(chuàng)建一個(gè)在線電子表格：

首先，我們定義Model的結(jié)構(gòu)，它的主要數(shù)據(jù)就是一個(gè)二維數(shù)組，每個(gè)單元格用一個(gè)JavaScript對(duì)象表示：

data: {
    title: 'New Sheet',
    header: [ // 對(duì)應(yīng)首行 A, B, C...
        { row: 0, col: 0, text: '' },
        { row: 0, col: 1, text: 'A' },
        { row: 0, col: 2, text: 'B' },
        { row: 0, col: 3, text: 'C' },
        ...
        { row: 0, col: 10, text: 'J' }
    ],
    rows: [
        [
        	{ row: 1, col: 0, text: '1' },
        	{ row: 1, col: 1, text: '' },
        	{ row: 1, col: 2, text: '' },
            ...
        	{ row: 1, col: 10, text: '' },
        ],
        [
        	{ row: 2, col: 0, text: '2' },
        	{ row: 2, col: 1, text: '' },
        	{ row: 2, col: 2, text: '' },
            ...
        	{ row: 2, col: 10, text: '' },
        ],
        ...
        [
        	{ row: 10, col: 0, text: '10' },
        	{ row: 10, col: 1, text: '' },
        	{ row: 10, col: 2, text: '' },
            ...
        	{ row: 10, col: 10, text: '' },
        ]
    ],
    selectedRowIndex: 0, // 當(dāng)前活動(dòng)單元格的row
    selectedColIndex: 0 // 當(dāng)前活動(dòng)單元格的col}

緊接著，我們就可以把Model的結(jié)構(gòu)映射到一個(gè)<table>上：

<table id="sheet">
    <thead>
        <tr>
            <th v-for="cell in header" v-text="cell.text"></th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="tr in rows">
            <td v-for="cell in tr" v-text="cell.text"></td>
        </tr>
    </tbody></table>

現(xiàn)在，用Vue把Model和View關(guān)聯(lián)起來，這個(gè)電子表格的原型已經(jīng)可以運(yùn)行了！

下一步，我們想在單元格內(nèi)輸入一些文本，怎么辦？

因?yàn)椴皇撬袉卧穸伎梢员痪庉嫞仔泻褪琢胁恍小Ｊ仔袑?duì)應(yīng)的是<th>，默認(rèn)是不可編輯的，首列對(duì)應(yīng)的是第一列的<td>，所以，需要判斷某個(gè)<td>是否可編輯，我們用v-bind指令給某個(gè)DOM元素綁定對(duì)應(yīng)的HTML屬性：

<td v-for="cell in tr" v-bind:contenteditable="cell.contentEditable" v-text="cell.text"></td>

在Model中給每個(gè)單元格對(duì)象加上contentEditable屬性，就可以決定哪些單元格可編輯。

最后，給<td>綁定click事件，記錄當(dāng)前活動(dòng)單元格的row和col，再綁定blur事件，在單元格內(nèi)容編輯結(jié)束后更新Model：

<td v-for="cell in tr" v-on:click="focus(cell)" v-on:blur="change" ...></td>

對(duì)應(yīng)的兩個(gè)方法要添加到VM中：

var vm = new Vue({
    ...
    methods: {
        focus: function (cell) {
            this.selectedRowIndex = cell.row;            this.selectedColIndex = cell.col;
        },
        change: function (e) {
            // change事件傳入的e是DOM事件
            var
                rowIndex = this.selectedRowIndex,
                colIndex = this.selectedColIndex,
                text;            if (rowIndex > 0 && colIndex > 0) {
                text = e.target.innerText; // 獲取td的innerText
                this.rows[rowIndex - 1][colIndex].text = text;
            }
        }
    }
});

現(xiàn)在，單元格已經(jīng)可以編輯，并且用戶的輸入會(huì)自動(dòng)更新到Model中。

如果我們要給單元格的文本添加格式，例如，左對(duì)齊或右對(duì)齊，可以給Model對(duì)應(yīng)的對(duì)象添加一個(gè)align屬性，然后用v-bind:style綁定到<td>上：

<td v-for="cell in tr" ... v-bind:style="{ textAlign: cell.align }"></td>

然后，創(chuàng)建工具欄，給左對(duì)齊、居中對(duì)齊和右對(duì)齊按鈕編寫click事件代碼，調(diào)用setAlign()函數(shù)：

function setAlign(align) {
    var
        rowIndex = vm.selectedRowIndex,
        colIndex = vm.selectedColIndex,
        row, cell;    if (rowIndex > 0 && colIndex > 0) {
        row = vm.rows[rowIndex - 1];
        cell = row[colIndex];
        cell.align = align;
    }
}// 給按鈕綁定事件:$('#cmd-left').click(function () { setAlign('left'); });
$('#cmd-center').click(function () { setAlign('center'); });
$('#cmd-right').click(function () { setAlign('right'); });

現(xiàn)在，點(diǎn)擊某個(gè)單元格，再點(diǎn)擊右對(duì)齊按鈕，單元格文本就變成右對(duì)齊了。

類似的，可以繼續(xù)添加其他樣式，例如字體、字號(hào)等。

MVVM的適用范圍

從幾個(gè)例子我們可以看到，MVVM最大的優(yōu)勢(shì)是編寫前端邏輯非常復(fù)雜的頁面，尤其是需要大量DOM操作的邏輯，利用MVVM可以極大地簡(jiǎn)化前端頁面的邏輯。

但是MVVM不是萬能的，它的目的是為了解決復(fù)雜的前端邏輯。對(duì)于以展示邏輯為主的頁面，例如，新聞，博客、文檔等，不能使用MVVM展示數(shù)據(jù)，因?yàn)檫@些頁面需要被搜索引擎索引，而搜索引擎無法獲取使用MVVM并通過API加載的數(shù)據(jù)。

所以，需要SEO（Search Engine Optimization）的頁面，不能使用MVVM展示數(shù)據(jù)。不需要SEO的頁面，如果前端邏輯復(fù)雜，就適合使用MVVM展示數(shù)據(jù)，例如，工具類頁面，復(fù)雜的表單頁面，用戶登錄后才能操作的頁面等等。

設(shè)置項(xiàng)可設(shè)置圖例位置、文字樣式、配色類型、區(qū)間名稱及配色方案。圖例位置用于設(shè)置圖例的位置，文字樣式用于設(shè)置圖例的文字字體、字號(hào)及顏色等

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

標(biāo)簽：Excel表格 電子表格

上一篇:無代碼應(yīng)用構(gòu)建考試（低代碼平臺(tái)構(gòu)建應(yīng)用）

下一篇:Zabbix如何實(shí)現(xiàn)對(duì)大流量監(jiān)控?cái)?shù)據(jù)的高效處理？

相關(guān)文章

WPS表格中怎么添加附件（wps里面怎么加附件）

1452 2025-03-31

WPS表格基礎(chǔ)教程-設(shè)置打印表頭的方法（wps表格如何打印表頭）

1452 2025-03-31

excel表格如何制作">學(xué)習(xí)excel表格如何制作

1452 2025-03-31