vue+vuetify表格控件v-data-table使用自定义列渲染
这里先说明一下vue项目中使用vuetify框架进行整合的办法:1、加入依赖 npm install vuetify --save2、加入开发依赖 npm install sass sass-loader deepmerge --save-dev3、在webpack.base.config.js中加入如下配置:module.exports = {module:rules:[{test: /\.s(
这里先说明一下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函数一样了。我们可以看看效果:
更多推荐
所有评论(0)