vue-easy-table-element
vue-element-easy-table
-
基于 element-ui table 二次封装的简单表格
-
完全支持 element ui table 组件的所有属性
安装
npm i vue-element-easy-table
示例
// 在main.js 引入
import EasyTable from "vue-element-easy-table";
Vue.use(
EasyTable,
/* 全局配置,element-ui table属性都可用 */ {
// 表格属性
tableAttrs: {
border: true,
size: "small",
"header-row-class-name": "className",
},
// 单元格属性
tableColumnAttrs: {
align: "center",
emptyPlaceholder: "--",
omit: {
rows: 2,
direction: "top",
},
},
// 分页属性
paginationAttrs: {
align: "right",
},
}
);
<EasyTable
row-id="id"
:data="tableData"
:tableOptions="tableOptions"
:page.sync="page"
:page-size.sync="size"
:total="total"
:checkbox-config="{fetchVal: true, rowClick: true}"
:radio-config="{selectedVal: selectedVal, fetchVal: true, rowClick: true}"
@selected-change="select"
@checked-change="handleChecked"
@pagination="handleChangePage"
/>
export default {
name: "App",
components: {},
data() {
return {
page: 1,
size: 10,
total: 1000,
selectedVal: -1,
tableData: [
{
id: 10,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
type: "1",
img: require("@/assets/images/avatar.jpg"),
status: 1,
},
{
id: 21,
date: "2016-05-04",
name: "王小虎",
address:
"上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄",
type: 0,
img: require("@/assets/images/avatar.jpg"),
status: 1,
},
{
id: 33,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
type: false,
img: require("@/assets/images/avatar.jpg"),
status: 2,
},
{
id: 4,
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
type: "上海市普陀区金沙江路 1516 上海市普陀区金沙江路 1516",
img: require("@/assets/images/avatar.jpg"),
status: 0,
},
],
};
},
computed: {
tableOptions() {
return [
{
title: "单选",
type: "radio",
},
{
title: "日期",
prop: "date",
merge: [
{
title: "名称",
prop: "name",
merge: [
{
title: "名称1",
prop: "name",
},
{
title: "地址",
prop: "address",
returnVal: (value) => {
return `详细地址:${value}`;
},
},
],
},
{
title: "地址",
prop: "address",
},
],
},
{
title: "名称111",
prop: "type",
renderHeader: () => {
return (
<span>
<span>自定义表头</span>
<sup>*</sup>
</span>
);
},
returnVal: (value, row) => {
return `姓名: ${value}`;
},
},
{
title: "图片",
render: (h, data) => {
return (
<div>
<img style="width: 50px; height: 50px" src={data.img} />
</div>
);
},
},
{
title: "地址",
prop: "address",
omit: {
effect: "light",
rows: 2,
direction: "top",
},
},
{
title: "地址",
prop: "address",
omit: 1,
},
{
title: "状态",
prop: "status",
enumType: [
{
value: 0,
label: "未开始",
},
{
value: 1,
label: "已开始",
},
{
value: 2,
label: "进行中",
},
],
},
{
title: "状态2",
prop: "status",
enumType: {
// 自定义枚举参数
params: {
value: "status",
label: "text",
},
data: [
{
status: 0,
text: "未开始",
},
{
status: 1,
text: "已开始",
},
{
status: 2,
text: "进行中",
},
],
},
},
];
},
},
methods: {
handleChangePage({ page, size }) {
console.log(page, size);
console.log(this.page);
console.log(this.size);
},
handleChecked(data) {
console.log("radio");
console.log(data);
},
select(data) {
console.log("selected");
console.log(data);
},
},
};
Table Global Attribute
参数 | 说明 | 类型 |
---|---|---|
tableAttrs | 表格属性 | object |
tableColumnAttrs | 单元格属性 | object |
paginationAttrs | 分页属性 | object |
Table Attribute
参数 | 说明 | 类型 | 可选 |
---|---|---|---|
loading | 加载 | boolean | — |
page | 当前页 | number | — |
pageSize | 每页数量 | number | — |
total | 数据总条数 | number | — |
row-id | 行数据的取值参数 | string | — |
tableOptions | 表格参数 | array | — |
checkbox-config | type=selection 配置参数:“fetchVal 直接取值,row-id 必须填写取值属性,rowClick 点击行” | object | {fetchVal: boolean, rowClick: boolean} |
radio-config | type=radio 配置参数:“selectedVal 默认选中,fetchVal 直接取值,row-id 必须填写取值属性,rowClick 点击行” | object | {selectedVal: selectedVal, fetchVal: boolean, rowClick: boolean} |
paginationAttrs | 绑定分页属性,可参考 element-ui Pagination 属性 | object | — |
Table Options
参数 | 说明 | 类型 | 可选 | 默认值 |
---|---|---|---|---|
title | 显示的标题 | string | — | — |
prop | 对应列内容的字段名 | string | — | — |
width | 单元格宽度 | number | — | — |
show | 是否显示 | boolean | — | true |
align | 文本对齐方式 | string | left/right/center | — |
type | radio 显示单选框,其他参数对应 element-ui table 的 type 属性 | string | selection/index/expand/radio | — |
attrs | 绑定属性,可参考 element-ui table Table-column Attributes 属性 | object | — | — |
merge | 表头合并,递归合并表头,可多层合并 | array | — | — |
render | 等同于 element-ui table “slot-scope”,“h:生成虚拟 dom 组件,data:当前行数据” | Function(h, data) | — | — |
check | check 为 false,使用 render 渲染,则不会验证 prop 字段数据值是否为空 | boolean | — | true |
omit | 文字多行省略,可直接填写数字,或{ rows: 1, direction: 'top'},默认显示方向:“top”,如需改变方向修改 direction 参数即可(参数值参考 el-tooltip 的 placement 参数值),其他属性根据 element-ui el-tooltip 属性即可 | number/object | — | — |
sortable | 列排序 | boolean | — | — |
returnVal | 可对数据做相应处理返回。“val:prop 的对应值,rows:当前行数据” | Function(val, rows) | — | — |
enumType | 数据枚举,参数 prop 属性值进行过滤显示,如果枚举数据不是 lable 和 value 则使用自定义参数{ params: {label: '对应 label', value: '对应 value'}, data: enumData } | array[{lable: string, value: any}]/object | — | — |
renderHeader | 自定义表头 | Function | — | — |
emptyPlaceholder | 空占位符。当数据值为:undefined/null/empty,则会用占位符显示 | string | — | — |
Table Events
事件名 | 说明 | 类型 |
---|---|---|
checked-change | 单选框选中回调,如果填写 row-id 属性并且"fetchVal: true",则取值返回,否则返回当前行数据 | Function(data) |
selected-change | 多选框选中回调,如果填写 row-id 属性并且"fetchVal: true",则取值返回,否则返回当前行数据 | Function(data) |
pagination | 切换分页或者 size 改变触发 | Function(page, size) |
更新日志
2020 年 11 月 19 日
- 首次提交
- 新增空占位符
2020 年 11 月 27 日
- 新增数据枚举,自定义枚举参数
2020 年 11 月 28 日
- 新增自定义返回值
2020 年 12 月 01 日
- 修复 tableOptions 数据未响应
2020 年 12 月 02 日
- 解决 form 表单属性无法双向绑定
- 新增自定义表头(合并表头无法自定义)
2020 年 12 月 07 日
- 修复切换表格数据页面样式出错
2020 年 12 月 10 日
- 新增 N 行文字显示省略 & tips 显示
2020 年 12 月 17 日
- 修复 radio 单选返回值 undefined
2020 年 12 月 22 日
- 优化多行文字省略
2020 年 12 月 24 日
- 优化枚举数据
- 新增 slot-empty
2020 年 12 月 29 日
- 更新文档
2020 年 12 月 30 日
- 新增 render 渲染验证数据
2021 年 1 月 22 日
- pagination 切换页码、页数返回值
2021 年 4 月 15 日
- 修复分页全局 layout 无效
2021 年 9 月 7 日
- 修复单选框选择数据报错
2021 年 9 月 15 日
- 修复单选框设置默认值报错