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

    這裏先說明一下vue項目中使用vuetify框架進行整合的辦法：

    一、加入依賴  npm install vuetify --save

    二、加入開發依賴 npm install sass sass-loader deepmerge --save-dev

    三、在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
					  },
					},
				  },
				],
			  }
		]
}

    四、自定義插件

    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)

    五、在代碼中加入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函數同樣了。咱們能夠看看效果：