这里先说明一下vue项目中使用vuetify框架进行整合的办法：
1、加入依赖 npm install vuetify --save
2、加入开发依赖 npm install sass sass-loader deepmerge --save-dev
3、在webpack.base.config.js中加入如下配置：
module.exports = { module: rules:[ { test: /\.s(c|a)ss$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'sass-loader', // Requires sass-loader@^7.0.0 options: { implementation: require('sass'), indentedSyntax: true // optional }, // Requires sass-loader@^8.0.0 options: { implementation: require('sass'), sassOptions: { indentedSyntax: true // optional }, }, }, ], } ] }4、自定义插件
src/plugins/vuetify.js
import Vue from 'vue' import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' Vue.use(Vuetify) const opts = {} export default new Vuetify(opts)5、在代码中加入vuetify
src/main.js
import Vue from 'vue' import App from './App' import router from './router' import vuetify from '@/plugins/vuetify' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, vuetify, components: { App }, template: '<App/>' })/************************************************\
以上只是介绍如何在vue项目中引入vuetify框架。
下面我们看看如何使用vuetify的表格控件以及自定义渲染。
<template> <v-app> <v-main> <v-container> <v-data-table disable-pagination hide-default-footer :headers="headers" :items="contents" > <template v-slot:item.operate="{ item }"> {{item.id}} - 删除 </template> </v-data-table> </v-container> </v-main> </v-app> </template> <script> export default { name: 'HelloWorld', data () { return { msg: 'Welcome to Your Vue.js App', headers:[ { text:'id', value:'id' }, { text:'name', value:'name' }, { text:'age', value:'age' }, { text:'operate', value:'operate' } ], contents:[ { id:'101',name:'xxx',age:18 }, { id:'102',name:'yyy',age:20 } ] } } } </script>以上代码中，我们在template模板中使用了v-app v-main v-container等vuetify组件，最后加入了v-data-table表格组件，表格组件使用必须的属性是需要定义表头和列表项。这里的属性就是headers和items属性。
headers,items都在脚本部分通过data()来指定，这样页面就可以直接使用了，他们都是数组。
headers:[{text:'',value:''}]中主要的两个属性分别是列显示名称和列对应真实数据的映射名。
items中定义json数组对象，具体指定每一列数据项。
这里简单的数据就可以这么来实现了。
通常情况下，表格会有一些特殊情况，比如操作列，他需要自定义，还有一些状态显示也需要自定义，我们就不能在items数组中直接定义了，这时候在组件v-data-table内部嵌套一个<template></template>来实现，如下所示：
<v-data-table> <template v-slot:items.operate="{items}"> {{item.id}} - 删除 </template> </v-data-table>通过v-slot:items.operate="{{ items }}"来指定对应的列。然后在<template></template>标签体内自定义渲染结果。
这就好比react项目自定义渲染列表中的render函数一样了。我们可以看看效果：
