vue2.0 核心render函數 提高渲染效率 iview動態渲染dom

<template>
  <div class="home">
    <div class="homeBTn">
      <router-link to="/createTasks">
        <Button type="primary" custom-icon="i-td i-td-add_px">新建任務</Button>
      </router-link>
    </div>
    <div class="homeContent">
      <Table class='td-table-no-border homeList' :columns='resultTitles' :data='data' size='large'></Table>
      <div class="homePage">
        <Page style="float:right" :total="100" show-elevator show-sizer/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {
      data: [
        {
          id: '1',
          ids: '222',
          name: '測試',
          desc: 1,
          pushCycle: '周',
          dbHost: '127.0.0.1',
          dbPort: '8090',
          dbName: 'kkk'
        },
        {
          id: '2',
          ids: '222',
          name: '測試',
          desc: 3,
          pushCycle: '周',
          dbHost: '127.0.0.1',
          dbPort: '8090',
          dbName: 'kkk'
        }
      ],
      resultTitles: [
        {
          title: '任務名稱',
          key: 'id',
        },
        {
          title: '客戶名稱',
          key: 'ids',
        },
        {
          title: '任務類型',
          key: 'name',
        },
        {
          title: '匹配狀態',
          key: 'desc',
          render: (h, params) => h('div',[
            h('div', {
              style: {
                width:'8px',
                height: '8px',
                float: 'left',
                background: params.row.desc === 1 ? 'red' : 'green',
                borderRadius: '4px',
                marginTop: '6px',
                marginRight: '6px'
              },
            }),
            h('div', {
              style: {
                float: 'left',
              }
            }, this.formatStatus(params.row.desc))
          ])
        },
        {
          title: '匹配設備量',
          key: 'pushCycle',
          sortable: true,
          sortType: 'asc'
        },
        {
          title: '下發狀態',
          key: 'dbHost',
          render: (h, params) => h('div', [
            h('div', {
              style: {
                display: 'inline-block'
              }
            }, params.row.dbHost),
            h('Poptip', {
              props: {
                width: '200',
                trigger: 'hover',
                content: 'wwww',
                placement: 'top-start',
                offset: -10,
                wordWrap: true,
              },
              style: {
                display: 1==1 ? 'inline-block' : 'none'
              }
            }, [
              h('i', {
                class: 'ivu-icon i-td i-td-help_outline_px',
                style: {
                  marginTop: '-4px',
                  marginLeft: '5px',
                }
              })
            ])
          ])
        },
        {
          title: '更新時間',
          key: 'dbPort',
        },
        {
          title: '創建時間',
          key: 'dbName',
        },
        {
          title: '操作',
          key: '',
          render: (h, params) => {
            return h('div', [
              h('div', [
                h('a', {
                  style: {
                    fontSize: '12px',
                    float: 'left',
                    color: '#2185F0',
                    fontWeight: 'bold',
                  },
                  on: {
                    click: () => {
                      console.log(params);
                    },
                  },
                }, '編輯'),
                h('a', {
                  style: {
                    fontSize: '12px',
                    float: 'left',
                    marginLeft: '10px',
                    color: '#2185F0',
                    fontWeight: 'bold',
                  },
                  on: {
                    click: () => {
                      console.log(params);
                    },
                  },
                }, '刪除'),
                h('Dropdown', {
                  props: {
                    trigger: 'click'
                  },
                  on: {
                    'on-click': (value) => {
                      console.log(value);
                    }
                  }
                }, [
                  h('a', [
                    h('span', {
                      style: {
                        fontSize: '12px',
                        float: 'left',
                        marginLeft: '10px',
                        color: '#2185F0',
                        fontWeight: 'bold',
                      }
                    }, '更多'),
                    h('Icon', {
                      props: {
                        custom: 'i-td i-td-arrow_drop_down_px',
                        size: '20'
                      },
                      style: {
                        color: '#2185F0',
                        float: 'left',
                        marginTop: '-1px',
                      }
                    })
                  ]),
                  h('DropdownMenu', {
                    slot: 'list'
                  }, [
                    h('DropdownItem', '查看')
                  ])
                ])
              ]),
            ]);
          },
        },
      ]
    }
  },
  methods: {
    formatStatus(status) {
      const sources = ['未構建', '構建中', '構建成功', '構建失敗'];
      return status === 0 ? '未知' : sources[status - 1];
    },
  }
}
</script>

<style scoped>
  .home{
    margin: 0 20px;
    height: calc(100% - 190px);
  }
  .homeBTn{
    height: 90px;
    line-height: 85px;
  }
  .homeContent{
    background: #fff;
    height: 100%;
  }
  .homeList{
    height: 100%;
    overflow-y: auto;
    max-height: calc(100% - 100px);
  }
  .homePage{
    margin-top: 25px;
    margin-right: 25px;
  }
</style>