vue+vuetify表格控件v-data-table使用自定义列渲染

    这里先说明一下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函数一样了。我们可以看看效果：