vue-element-easy-table
v0.6.1
Published
基于element-ui table 二次封装的简单表格
Downloads
144
Maintainers
xy82288478Readme
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,
draggable：false, // 不可拖拽
info: {
name: 'test',
addr: {
text: '地址测试1111'
}
},
},
{
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",
draggable：false, // 不可拖拽
},
{
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: "info.addr.text",
omit: {
effect: "light",
rows: 2,
direction: "top",
},
},
{
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 | — | | columnDraggable | 列排序 | boolean | — | true | | lineDraggable | 行排序 | boolean | — | true | | headerWidthAdp| 表头宽度自适应 | boolean | — | false |
| extraColumnWidth| 额外列宽度（表头宽度自适应生效） | number | — | 0 |
TODO：如果需要针对某一项数据不可拖拽，在数据里面加上 draggable: false 即可
Table Options
| 参数 | 说明 | 类型 | 可选 | 默认值 | | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ---------------------------- | ------ | | label/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 | — | — | | draggable | 排序（可针对某一列不可拖拽） | boolean | — | true | | fixed | 固定位置 | string | left/right | —
Table Events
| 事件名 | 说明 | 类型 | | ----------------- | ---------------------------------------------------------------------------------------- | -------------------- | | checked-change | 单选框选中回调，如果填写 row-id 属性并且"fetchVal: true"，则取值返回，否则返回当前行数据 | Function(data) | | selected-change | 多选框选中回调，如果填写 row-id 属性并且"fetchVal: true"，则取值返回，否则返回当前行数据 | Function(data) | | pagination | 切换分页或者 size 改变触发 | Function(page, size) | | onColumnDraggable | 列拖拽排序结束触发 | Function(evt) | | onLineDraggable | 行拖拽排序结束触发 | Function(evt) |
更新日志
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 日
- 修复单选框设置默认值报错
2024 年 3 月 11 日
- 增加列、行拖拽排序
2024 年 8 月 2 日
- 更新文档
2024 年 12 月 20 日
- 新增复杂数据类型渲染
- 默认列宽度（优先级高于表头自适应宽度）
- 表头标题宽度自适应
2024 年 12 月 23 日
- 修复表格未出现滚动条情况下表头宽度自适应宽度不准确
2024 年 12 月 24 日
- 新增复杂数据类型针对render有效
2025 年 5 月 8 日
- 优化数据对象类型