对比Vue和React两个框架实现列表操作按钮动态渲染的逻辑，哪个书写更加方便呢，我觉得React。

源码请看文章末尾

要实现的功能都是一样的，如上面这个图，图片中每一行后面的这些按钮是动态展示的，如果超过3个时，第三个作为一个下拉框展示，但是第三个是可以点击的边上的三个点作为下拉的触发按钮。 vue版本的是基于el-table, react的是基于antd table组件库，下面咱们只看按钮的展示逻辑的编码

先看react：

const columns = [{
    title: '操作',
    render: (_, record, index) => {
      // 这是动态获取有权限的按钮集合
      const filterBtns = getAuthorizeBtn(record, tabName);
      const isDayu3 = filterBtns.length > 3;
            
      return (
        <Space>
          {
            isDayu3 ? (
              <>
                { renderBtn(Button, filterBtns.slice(0,2)) }
                <Dropdown.Button
                  overlay={
                    <Menu>
                      { renderBtn(Menu.Item, filterBtns.slice(3)) }
                    </Menu>
                  }
                  type={'danger'}
                >{filterBtns[2][1]}</Dropdown.Button>
              </>
            ) : renderBtn(Button, filterBtns)
          }
        </Space>
      )
    },
}];

const renderBtn = (Cpt, list) => {
  return list.map(([key, name, type]) => {
      return (
        <Cpt key={key} type={type}>{name}</Cpt>
      )
    })
}

Vue版本的：

<el-table-column label="操作">
    <template slot-scope="scope">
      <template
        v-if="getAuthorizeBtn(scope.row, tabName).length <= 3"
      >
        <el-button
          v-for="item in getAuthorizeBtn(scope.row, tabName)"
          :key="item[0]"
          size="mini"
          :type="item[2]"
          @click="$emit('operation', item[0], scope.row)"
        >
          {{ item[1] }}
        </el-button>
      </template>
      <template v-else>
        <el-button
          v-for="item in getAuthorizeBtn(scope.row, tabName).splice(0, 2)"
          :key="item[0]"
          size="mini"
          :type="item[2]"
          @click="$emit('operation', item[0], scope.row)"
        >
          {{ item[1] }}
        </el-button>
        <el-dropdown
          size="mini"
          split-button
          type="primary"
          @click="$emit('operation', getAuthorizeBtn(scope.row, tabName).splice(2, 1)[0][0], scope.row)"
        >
          {{ getAuthorizeBtn(scope.row, tabName).splice(2, 1)[0][1] }}
          <el-dropdown-menu slot="dropdown" style="min-width: 80px;text-align: center">
            <el-dropdown-item
              v-for="item in getAuthorizeBtn(scope.row, tabName).splice(3)"
              :key="item[0]"
              @click.native="$emit('operation', item[0], scope.row)"
            >
              {{ item[1] }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </template>
</el-table-column>

react: codepen.io/wh124693594…
Vue: codepen.io/wh124693594…