1、话不多说先看效果
主要实现功能:筛选:输入框、下拉框、时间;表格适用:多选、序号、排序、自定义、开关、链接可跳转、输入框、图片、自定义操作按钮(部分页面需要每行显示按钮不用所以大家按需添加)、常规操作按钮(每行操作按钮都相同无其他需求)、设置行背景色、分页
2、本文部分原创,大框架是复制的https://blog.csdn.net/qq_37346639/article/details/115556605这个博客,因为懒的自己写,按照需求改为自己所需要格式
3、筛选组件代码
-
{{ selectItem[item.leftLabel] }}
{{ selectItem[item.rightLabel] }}
{{operations.label}}
4、表格组件代码
{{row[column.prop]}}
{{row[column.prop]}}
{{row[column.prop]}}
{{row[column.prop]}}
{{operations.label}}
{{operations.label}}
5、全局引入组件
**main.js**页面全局引入组件或单页面引入看需求,我是全局引入
import { PublicTable,PublicFilter } from '@/components';
Vue.component(PublicTable.name,PublicTable);
Vue.component(PublicFilter.name,PublicFilter);
文件目类
[图片上传失败...(image-70848a-1662602567621)]
components>index.js
import PublicTable from '@/components/PublicTable';
import PublicFilter from '@/components/PublicFilter';
export {
PublicTable,PublicFilter
};
6、父组件使用
备选项
备选项
备选项
{{row.name}}
{{row.address}}