vue组件用jquery_jquery.floatThead的Vue 2组件

vue组件用jquery

Vue-floatthead (vue-floatthead)

Vue 2.0 component for floatThead, a floating & sticky table header plugin.

用于floatThead的Vue 2.0组件，floatThead是一个浮动的粘性表头插件。

安装 (Installation)

npm (npm)

$ npm install vue-floatthead

入门 (Getting Started)

<template>
  <float-thead-table>
    <thead>
      <tr>
          <th><a href="#" id="demoHeader1">xclick me</a></th>
          <th><a href="#" id="demoHeader2">mouse over me</a></th>
          <th><a href="#" id="demoHeader3">Header...3</a></th>
      </tr>
      <tbody>
        <tr>
            <td>Cell Content 1</td>
            <td>Cell Content 2</td>
            <td>Cell Content 3</td>
        </tr>
      </tbody>
    </thead>
  </float-thead-table>
</template>

<script>
  import Vue from 'vue'
  import FloatThead from 'vue-floatthead'

  Vue.use(FloatThead)

  export default {
    components: {
      FloatThead
    }
  }
</script>

用法 (Usages)

Pass options to the component

将选项传递给组件

<float-thead-table position='fixed' floatTableClass='awesome-table'></float-thead-table>

Call methods of the component destroy(), reflow(), or getRowGroups()

组件destroy() ， reflow()或getRowGroups()调用方法

<float-thead-table ref='awesometable'></float-thead-table>

<script>
  ...
  methods: {
    triggerDestroy () {
      this.$refs.awesometable.destroy()
    }
  }
  ...
</script>

Trigger events

触发事件

<script>
  ...
  mounted () {
    this.$refs.awesometable.$on('floatThead', (e, isFloated, floatContainer) =>
      console.log('floatThead triggered', e, isFloated, floatContainer)
    )
    this.$refs.awesometable.$on('reflowed', (e, floatContainer) =>
      console.log('reflowed triggered', e, floatContainer)
    )
  }
  ...
</script>

翻译自: https://vuejsexamples.com/vue-2-component-for-jquery-floatthead/

vue组件用jquery