一个用来实现 el-table 包含合计与总计或者其他场景的组件
npm install el-table-footershell
npm install el-table-footer -S
`
webpack.base.conf.js
因代码中使用了es6的语法 所以需要添加babel配置
` javascript
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
// 此处为添加的配置
const fs = require('fs')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
//此处为添加的配置
let dirsName = fs.readdirSync(resolve('node_modules')).filter(dirName => /el-table-footer/.test(dirName))
const includesDirs = dirsName.map(dir => resolve(node_modules/${dir}/src))
module.exports = {
... //省略的代码
module: {
rules: [
// 省略代码...
// 此处有添加babel-loader配置 ‘...includesDirs‘
{
test: /.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client'), ...includesDirs]
},
{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
`
Quick Start
` javascript
import Vue from 'vue'
import ElTableFooter from 'el-table-footer'
Vue.use(ElTableFooter)
`
$3
`html
:data="tableData"
border
ref="table"
>
prop="id"
label="ID"
width="400"
fixed>
prop="name"
label="姓名"
width="400">
prop="amount1"
label="数值 1"
width="400">
prop="amount2"
label="数值 2"
width="400">
prop="amount3"
label="数值 3"
width="400"
fixed="right">
``