2.需求：按鈕超過3個要摺疊顯示到更多中，少於3個不顯示更多

3.針對需求引發的問題：

　　1.每條資料，每個按鈕，每種許可權判斷該不該顯示當前按鈕，條件太多太複雜。

　　2.動態展示有兩種實現方案：

　　　　1.構造動態展示的資料結構menuList去渲染操作欄

　　　　2.自定義操作欄元件，先讓元件渲染，然後通過 DOM操作（指令或者生命週期）去移動或者移除DOM （該方式在Vue中嘗試未果，後續再試）

　　3.針對實現方案1有兩個難點：

　　　　1. 在不使用render渲染的情況下，原有程式碼改動最小的前提下。定義的menuList中控制顯示隱藏的v-if條件和繫結的函式都是字串，怎麼解析？

　　　　2. 繫結函式的引數怎麼對映到？

4.解決：

　　1.定義操作列表

　　2.建構函式：

export const generatorOperateMenuList = function () {
  JSON.parse(sessionStorage.userInfor).role.forEach(item => {
    if (item.roleCode === 'CYS') {
      isCysRole = true
    }
    
 
if (item.roleCode === 'YSKF') {
      isYskfRole = true
    }
  })

  return (menuList, row) => {
    const operateObj = {
      out: [],
      inner: []
    }

    let menus = menuList.filter(m => eval(m.isShow.valueOf())) // 使用 eval 解決 v-if 字串解析成變數的問題

    let len = menus.length

    if (len > 0) {
      
 
if (len > 2) {
        operateObj.out = [...menus.splice(0, 2)]
        operateObj.inner = [...menus]
      } else {
        operateObj.out = [...menus]
        operateObj.inner = []
      }
    }
    // console.log(operateObj)
    return operateObj
  }
}

　　3.操作渲染

　　4.evil解析函式的方法定義

evil (func, row) {
   // 使用eval 函式解析字串函式定義 
    // row 引數特別重要，對映到字串函式中的 row
  　eval(func) // eslint-disable-line
},

// 呼叫
// 入參 row 對映到字串函式中的 實參 row
<a class="btn" @click="() => {evil('this.' + m.func, row)}">{{ m.label }}</a>

　　5.eval函式存在lint校驗和安全問題，可以註釋掉行校驗eslint

　　6. eval函式的替代函式，// 存在一個問題，無法 對映到 實參 row，後續解決；

evil (fn) {
   let Fn = Function // 一個變數指向Function，防止有些前端編譯工具報錯
    return new Fn('return ' + fn)()
 }