easy directive for fixed table header
npm install v-element-table-header基于 vue 与 element-ui 的 v-element-table-header 指令
一个简单的指令便可随父级定位元素的滚动位置自动显示与隐藏表格头部
shell
yarn add v-element-table-header
`
$3
`shell
npm install v-element-table-header --save
`使用
$3
main.js
`js
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import vElementTableHeader from 'v-element-table-header'
import 'v-element-table-header/lib/main.css'
import '../../styles/index.scss'
import App from './app.vue'Vue.use(ElementUI)
//1、 使用注册插件方式注册指令
Vue.use(vElementTableHeader)
//2、 或者使用注册指令方式
// Vue.directive(vElementTableHeader.name, vElementTableHeader.option)
new Vue({
name: 'admin',
render: createElement => createElement(App)
}).$mount('#app')
`
app.vue
`vue
v-for="key of tableKeys"
:key="key"
:data="tableData"
border
v-element-table-header
style="minWidth: 100%; margin-bottom: 50px">
fixed
prop="date"
label="日期"
minWidth="180">
prop="name"
label="姓名"
minWidth="100">
prop="province"
label="省份"
minWidth="130">
prop="city"
label="市区"
minWidth="150">
prop="address"
label="地址"
minWidth="300">
prop="zip"
label="邮编"
minWidth="180">
fixed="right"
label="操作"
minWidth="100">
查看
编辑
``