項目技術：Vue-cli3、Element-ui、Ant-Design-Vue、Echarts4等

需求：在項目中所有使用el-table表格的地方，對【項目名稱列】添加點擊事件及樣式【觸發某個彈窗顯示并在該列添加 cursor: pointer; 等樣式】。

一、場景一：項目初期

1. 解決一：el-table默認插槽

描述：通過el-table默認插槽給項目名稱itemName列添加指定事件及樣式。

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

優點：靈活性，不同表格中添加其他不同邏輯代碼較靈活。

官網描述：

插槽代碼：

<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>

優化插槽代碼（自定義指令）：

// 全局注冊指令
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. 解決二：同場景二的解決一

二、場景二：項目后期

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

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

描述：私有化掉el-table組件 然后去改這個組件 組件內部進行調整。最后在項目中覆蓋掉element的el-table組> 件。

缺點：當更新element-ui的版本后，還需要重寫el-table。

優點：不用修改項目原來代碼，畢竟使用到的地方近百個el-table。

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

1. 找到el-table的源碼 node_module/element-ui/packages/table整個文件復制到項目中（不要被eslent檢測到，盡可能少改動源碼）

2. 修改依賴

   因為項目中使用Vue.use(ElementUI);將element組件全部注冊，將代碼中引入組件 element-ui/packages的代碼注釋掉（如果不注釋掉會報錯，直接引入node_module下element-ui/packages下的單個組件，可能內部代碼在未顯示引入全局Vue的情況下，不能直接使用Vue的transition等組件），默認直接使用Vue全局組件即可，以table-body.js為例：

   

3. 添加邏輯代碼

   一步步簡略查看最終定位到 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);
   

最終效果：

解決二：識別并修改Vnode

描述：識別router-view當前route中內部所有el-table，并修改Vnode。
目前個人能力有限，暫且擱置，后面會進行補充。