这段代码咋优化

Question

<template slot-scope="scope">
          <state :type="getStateObject(scope.row.state).type" :text="getStateObject(scope.row.state).value"></state>
          </template>

const getStateObject = (state) => {
      // debugger
      return STATE.filter((item) => +item.key === +state)[0];
    };

Answer 1

不知道你要优化什么，希望能写清楚点，不要让我们猜，如果是想优化写法，我想到一更优雅的写法：

<state v-slot="{ row: { state }}" v-bind="getStateObject(state)" />

const getStateObject = (state) => {
  // debugger
  const obj = STATE.find(item => +item.key === +state)
  return obj ? { type: obj.type, text: obj.value} : {}
}

Answer 2

这还能怎么优化啊，我也想知道

Answer 3

我猜想博主的优化意思是getStateObject这个方法，调用了两遍，想只调用一遍吧。

我有个另外的方式，但我也不知道算不算优化。

<template slot-scope="scope">
    <template v-for="(item,index) in getStateObject(scope.row.state)" :key="item">
         <state :type="item.type" :text="item.value"></state>
    </template>
</template>

相当于getStateObject调用了一遍。在html中定义了个临时的变量item

const getStateObject = (state) => {
    // debugger
    return STATE.filter((item) => +item.key === +state);  //不用 [0]，直接返回数组
};

Answer 4

你可以完全可以props一个对象过去