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

一时失言乱红尘 2022-12-16 14:24 211阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: /images/20221123/583ba439919d45acb7eb35776a876920.png