add hover-highlight prop in Table
This commit is contained in:
parent
af43876007
commit
2474ee5929
6 changed files with 7596 additions and 9 deletions
42
build/webpack.ssr.config.js
Normal file
42
build/webpack.ssr.config.js
Normal file
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
* 本地预览
|
||||
*/
|
||||
|
||||
var path = require('path');
|
||||
var webpack = require('webpack');
|
||||
// var ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
var HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
var merge = require('webpack-merge');
|
||||
var webpackBaseConfig = require('./webpack.base.config.js');
|
||||
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
|
||||
|
||||
module.exports = merge(webpackBaseConfig, {
|
||||
// 入口
|
||||
entry: {
|
||||
main: './examples/main',
|
||||
vendors: ['vue', 'vue-router']
|
||||
},
|
||||
// 输出
|
||||
output: {
|
||||
path: path.join(__dirname, '../examples/dist'),
|
||||
publicPath: '',
|
||||
filename: '[name].js'
|
||||
// chunkFilename: '[name].chunk.js'
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
iview: '../../src/index',
|
||||
// vue: 'vue/dist/vue.js'
|
||||
vue: 'vue/dist/vue.runtime.js'
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
// new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', filename: 'vendor.bundle.js' }),
|
||||
new HtmlWebpackPlugin({
|
||||
inject: true,
|
||||
filename: path.join(__dirname, '../examples/dist/index.html'),
|
||||
template: path.join(__dirname, '../examples/index.html')
|
||||
}),
|
||||
new FriendlyErrorsPlugin()
|
||||
]
|
||||
});
|
15
examples/entry-server.js
Normal file
15
examples/entry-server.js
Normal file
|
@ -0,0 +1,15 @@
|
|||
import { createApp } from './main';
|
||||
|
||||
export default context => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const { app, router } = createApp();
|
||||
router.push(context.url)
|
||||
router.onReady(() => {
|
||||
const matchedComponents = router.getMatchedComponents();
|
||||
if (!matchedComponents.length) {
|
||||
reject({ code: 404 });
|
||||
}
|
||||
resolve(app);
|
||||
}, reject);
|
||||
});
|
||||
};
|
|
@ -1,5 +1,7 @@
|
|||
<template>
|
||||
<Table border :columns="columns7" :data="data6" @on-expand="expand"></Table>
|
||||
<div>
|
||||
<Table border :columns="columns7" :data="data6" :hover-highlight="false"></Table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import etable from '../components/table.vue';
|
||||
|
@ -8,17 +10,18 @@
|
|||
data () {
|
||||
return {
|
||||
columns7: [
|
||||
{
|
||||
type: 'expand',
|
||||
width: 50,
|
||||
render: (h, params) => {
|
||||
// return h(etable);
|
||||
return h('div', params.row.name)
|
||||
}
|
||||
},
|
||||
// {
|
||||
// type: 'expand',
|
||||
// width: 50,
|
||||
// render: (h, params) => {
|
||||
// // return h(etable);
|
||||
// return h('div', params.row.name)
|
||||
// }
|
||||
// },
|
||||
{
|
||||
title: '姓名',
|
||||
key: 'name',
|
||||
fixed: 'left',
|
||||
render: (h, params) => {
|
||||
return h('div', [
|
||||
h('Icon', {
|
||||
|
|
7501
package-lock.json
generated
Normal file
7501
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
21
server.js
Normal file
21
server.js
Normal file
|
@ -0,0 +1,21 @@
|
|||
const createApp = require('./dist/iview.ssr.js');
|
||||
const server = require('express')();
|
||||
const renderer = require('vue-server-renderer').createRenderer();
|
||||
|
||||
server.get('*', (req, res) => {
|
||||
const context = { url: req.url };
|
||||
createApp(context).then(app => {
|
||||
renderer.renderToString(app, (err, html) => {
|
||||
if (err) {
|
||||
if (err.code === 404) {
|
||||
res.status(404).end('Page not found')
|
||||
} else {
|
||||
res.status(500).end('Internal Server Error')
|
||||
}
|
||||
} else {
|
||||
res.end(html);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
server.listen(2333);
|
|
@ -152,6 +152,9 @@
|
|||
},
|
||||
noFilteredDataText: {
|
||||
type: String
|
||||
},
|
||||
hoverHighlight: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
@ -351,10 +354,12 @@
|
|||
});
|
||||
},
|
||||
handleMouseIn (_index) {
|
||||
if (!this.hoverHighlight) return;
|
||||
if (this.objData[_index]._isHover) return;
|
||||
this.objData[_index]._isHover = true;
|
||||
},
|
||||
handleMouseOut (_index) {
|
||||
if (!this.hoverHighlight) return;
|
||||
this.objData[_index]._isHover = false;
|
||||
},
|
||||
highlightCurrentRow (_index) {
|
||||
|
|
Loading…
Add table
Reference in a new issue