項(xiàng)目技術(shù)：Vue-cli3、Element-ui、Ant-Design-Vue、Echarts4等

需求：在項(xiàng)目中所有使用el-table表格的地方，對(duì)【項(xiàng)目名稱列】添加點(diǎn)擊事件及樣式【觸發(fā)某個(gè)彈窗顯示并在該列添加 cursor: pointer; 等樣式】。

一、場(chǎng)景一：項(xiàng)目初期

1. 解決一：el-table默認(rèn)插槽

描述：通過el-table默認(rèn)插槽給項(xiàng)目名稱itemName列添加指定事件及樣式。

弊端：所有用到el-table的地方，都需要添加相同處理itemName列的邏輯代碼。

優(yōu)點(diǎn)：靈活性，不同表格中添加其他不同邏輯代碼較靈活。

官網(wǎng)描述：

插槽代碼：

<template slot-scope="{ row, column }">
    <span
        :class="{table__cellCanClick: column.property === 'iteName'}"
        @click="column.property === 'iteName' && showModal()"
        v-html="row[item.field]"
    ></span>
    <span></span>
</template>

優(yōu)化插槽代碼（自定義指令）：

// 全局注冊(cè)指令
let itemNameD = {
    inserted: function(el, binding) {
        let row = binding.value.row;
        let column = binding.value.column;
        if (column.property === "itemName") {
          el.classList.add("table__cell-can-click");
          el.addEventListener("click", () => {
            console.log(row);
          });
        }
      }
};
Vue.directive("itemNameD", itemNameD);

<template>
    <!-- 省略部分多余代碼 -->
    <el-table>
      <template slot-scope="{ row, column }">
        <span v-itemNameD="{ row, column }">{{ row[item.field] }}</span>
      </template>
    </el-table>
</template>

2. 解決二：同場(chǎng)景二的解決一

二、場(chǎng)景二：項(xiàng)目后期

描述：整個(gè)項(xiàng)目直接使用el-table組件的地方有近百處，秉承盡可能的減少修改原代碼原則。

解決一：私有化el-table組件

描述：私有化掉el-table組件 然后去改這個(gè)組件 組件內(nèi)部進(jìn)行調(diào)整。最后在項(xiàng)目中覆蓋掉element的el-table組> 件。

缺點(diǎn)：當(dāng)更新element-ui的版本后，還需要重寫el-table。

優(yōu)點(diǎn)：不用修改項(xiàng)目原來代碼，畢竟使用到的地方近百個(gè)el-table。

對(duì)源碼有抵觸心理的，可以先通過這篇簡(jiǎn)單了解 # element-ui 的組件源碼還能這么看：

1. 找到el-table的源碼 node_module/element-ui/packages/table整個(gè)文件復(fù)制到項(xiàng)目中（不要被eslent檢測(cè)到，盡可能少改動(dòng)源碼）

2. 修改依賴

   因?yàn)轫?xiàng)目中使用Vue.use(ElementUI);將element組件全部注冊(cè)，將代碼中引入組件 element-ui/packages的代碼注釋掉（如果不注釋掉會(huì)報(bào)錯(cuò)，直接引入node_module下element-ui/packages下的單個(gè)組件，可能內(nèi)部代碼在未顯示引入全局Vue的情況下，不能直接使用Vue的transition等組件），默認(rèn)直接使用Vue全局組件即可，以table-body.js為例：

   

3. 添加邏輯代碼

   一步步簡(jiǎn)略查看最終定位到 src/table-body.js：

   created() {
       // ...
       // 自己添加
       this.selfCustomField = ['itemName'];
   },
   methods: {
       // ...
       
       rowRender(row, $index, treeRowData) {
           // ...
            return (
                 <td
                   style={ this.getCellStyle($index, cellIndex, row, column) }
                   class={ this.getCellClass($index, cellIndex, row, column) }
                   rowspan={ rowspan }
                   colspan={ colspan }
                   on-click={ ($event) => this.handleCellClick($event, row, column) } /**自己添加**/
                   on-mouseenter={ ($event) => this.handleCellMouseEnter($event, row) }
                   on-mouseleave={ this.handleCellMouseLeave }>
                   {
                     column.renderCell.call(
                       this._renderProxy,
                       this.$createElement,
                       data,
                       columnsHidden[cellIndex]
                     )
                   }
                 </td>
               );
           },
   
           getCellClass(rowIndex, columnIndex, row, column) {
             // ...
   
             // 自己添加
             if (this.selfCustomField.includes(column.property)) {
               classes.push('table__cell-can-click');
             }
   
             classes.push('el-table__cell');
   
             return classes.join(' ');
           }
           /**自己添加**/
           handleCellClick(event, row, column) {
             if (this.selfCustomField.includes(column.property)) {
               console.log(row);
             }
           },
   }
   
   

4. 在main.js中覆蓋原el-table組件

   	import ElementUI from "element-ui";
   	// 重寫的組件
   	import ElTable from "./components/ReWriteFrameComponents/el-table";
   	// ...
   	
   	Vue.use(ElementUI);
   	Vue.use(ElTable);
   

最終效果：

解決二：識(shí)別并修改Vnode

描述：識(shí)別router-view當(dāng)前route中內(nèi)部所有el-table，并修改Vnode。
目前個(gè)人能力有限，暫且擱置，后面會(huì)進(jìn)行補(bǔ)充。