下拉表格类似于展开是3,合起是2,这样子:
安装
npm install --save vue-table-with-tree-grid
安装完成后,需要进行导入及注册(我放置的位置为main.js):
import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table',TreeTable)
接下来就是使用了。
使用
在需要使用的组件内使用:
<tree-table></tree-table>
当然,它有很多属性,看官网吧
设置内部数据通过绑定data属性进行设置。
有个写好的组件,不想删减了,除了表格还有其他的一些功能:
是通过vue+element-ui完成的,表格组件为 <tree-table></tree-table> 这一部分
<template>
<div>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
<el-breadcrumb-item>商品分类</el-breadcrumb-item>
</el-breadcrumb>
<el-card>
<el-row>
<el-col>
<el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
</el-col>
</el-row>
<!-- 表格 使用的外部表格 -->
<tree-table class="tree-table" :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border :show-row-hover="false">
<!-- 是否有效 -->
<template slot="isok" slot-scope="scope">
<i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: lightgreen;"></i>
<i class="el-icon-error" v-else style="color: red;"></i>
</template>
<!-- 排序 -->
<template slot="order" slot-scope="scope">
<el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
<el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
<el-tag size="mini" type="warning" v-else>三级</el-tag>
</template>
<!-- 操作 -->
<template slot="opt">
<el-button type="primary" icon="el-icon-edit" size="mini">编 辑</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini">删 除</el-button>
</template>
</tree-table>
<!-- 分页区域 -->
<!-- size-change 一页的大小改变时 current-change当前页改变时
current-page 当前所渲染的页码
page-size 当前每页显示的条数
layout 指当前页面总共有哪部分组成-->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[3,5,10,15]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
</el-card>
<!-- 添加分类的对话框 -->
<el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="50%" @close="addCateDialogClosed">
<!-- 添加分类的表单 -->
<el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
<!-- prop为验证规则 -->
<el-form-item label="分类名称:" prop="cat_name">
<el-input v-model="addCateForm.cat_name"></el-input>
</el-form-item>
<el-form-item label="父级分类:">
<!-- options用来指定数据源 props用来指定配置对象
:props="{ expandTrigger: 'hover' }"
v-model 必须为数组,多级id-->
<!-- 级联选择器只默认选择最后一级分类 -->
<el-cascader
v-model="selectedKeys"
:options="parentCateList"
:props="cascaderProps"
@change="parentCateChanged" clearable></el-cascader>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addCateDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addCate">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
// 查询条件
queryInfo: {
type: 3,
pagenum: 1,
pagesize: 5
},
// 商品分类数据列表,默认为空
catelist: [],
// 总数据条数
total: 0,
// 为tree-table指定列的定义
columns:[
{
label: '分类名称',
prop: 'cat_name'
},{
label: '是否有效',
// 将当前列定义为模板列
type: 'template',
// 表示当前这一列使用模板名称
template: 'isok'
},{
label: '排序',
type: 'template',
template: 'order'
},{
label: '操作',
type: 'template',
template: 'opt'
}
],
// 控制添加分类对话框的显示与隐藏
addCateDialogVisible: false,
// 添加分类的表单数据对象
addCateForm: {
// 将要添加分类的名称
cat_name: '',
// 父级分类的id
cat_pid: 0,
// 分类等级:`0`表示一级分类;`1`表示二级分类;`2`表示三级分类
cat_level: 0
},
// 添加分类的表单验证规则对象
addCateFormRules: {
cat_name: [
{reqired: true, message: '请输入分类名称', trigger: 'blur'}
]
},
// 父级分类的列表
parentCateList: [],
// 指定级联选择器的配置对象
cascaderProps: {
value: 'cat_id',
label: 'cat_name',
children: 'children',
expandTrigger: 'hover',
checkStrictly: true
},
// 选中的父级分类的id数组
selectedKeys: [],
}
},
created(){
this.getCateList()
},
methods: {
// 获取商品分裂数据
async getCateList() {
const { data: res } = await this.$http.get('categories', { params: this.queryInfo })
if(res.meta.status !== 200){
return this.$message.error('获取商品分类失败!')
}
console.log(res.data.result);
// 将数据列表赋值给catelist
this.catelist = res.data.result
// 为总数据条数赋值
this.total = res.data.total
},
// 监听pagesize改变
handleSizeChange(newSize){
this.queryInfo.pagesize = newSize
this.getCateList()
},
// 监听pagenum的改变
handleCurrentChange(newPage){
this.queryInfo.pagenum = newPage
this.getCateList()
},
// 点击按钮展示添加分类的对话框
showAddCateDialog(){
// 先获取父级分类的数据列表
this.getParentCateList()
// 再展示对话框
this.addCateDialogVisible = true
},
// 获取父级分类的数据列表
async getParentCateList(){
const {data: res} = await this.$http.get('categories', { params: { type: 2 }})
console.log(res);
if(res.meta.status !== 200){
return this.$meaage.error('获取父级分类数据失败!')
}
console.log(res.data);
this.parentCateList = res.data
},
// 选择项发生变化触发这个函数
parentCateChanged(){
console.log(this.selectedKeys);
//如果 selectedKeys 数组中的 length 大于0 ,证明选中的父级分类
// 反之没有选中任何父级分类
if(this.selectedKeys.length > 0){
// 父级分类的id
this.addCateForm.cat_pid = this.selectedKeys[
this.selectedKeys.length - 1
]
this.addCateForm.cat_level = this.selectedKeys.length
return
}else{
this.addCateForm.cat_pid = 0
this.addCateForm.cat_level = 0
}
},
// 点击按钮添加新的分类
addCate(){
this.$refs.addCateFormRef.validate(async valid => {
if(!valid) return
const {data: res} = await this.$http.post('categories',this.addCateForm)
if(res.meta.status !== 201){
return this.$meaaagae.error('添加分类失败!')
}
this.$message.success('添加分类成功')
this.getCateList()
this.addCateDialogVisible =false
})
},
// 监听对话框的关闭事件,重置表单数据
addCateDialogClosed(){
this.$refs.addCateFormRef.resetFields()
// 清空级联数据框内的数据
this.selectedKeys = []
this.addCateForm.cat_level = 0
this.addCateForm.cat_pid = 0
}
},
}
</script>
<style lang="less" scoped>
.tree-table{
margin: 15px;
}
.el-cascader{
width: 100%;
}
</style>
在有数据的情况下实现的效果与上面的截图一致。