IT俱乐部 JavaScript vue3基于elementplus 简单实现表格二次封装过程

vue3基于elementplus 简单实现表格二次封装过程

公司渲染表格数据时需要将空数据显示‘-’,并且对于每一列数据的显示也有一定的要求,基于这个需求对element-plus简单进行了二次封装。
具体包括以下几点(持续更新中):
1.空数据显示‘-’
2.固定表格高度
3.支持多选表格
4. 自定义列宽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<div>
     
            {{ checkEmpty(row[column.prop]) }}
          <div class="pagination">
       
</div>
  </div>
 
import { checkEmpty, getColumnWidth } from "@/utils/util";
const props = defineProps({
  dataSource: {
    type: Array,
    default: () => [],
  },
  columns: {
    type: Array,
    default: () => [],
  },
  vdaH: {
    type: Number,
    default: 300,
  },
  hideOperation: {
    type: Boolean,
    default: false,
  },
  operationWidth: {
    type: String,
    default: "100",
  },
  loading: {
    type: Boolean,
    default: false,
  },
  //是否多选显示
  isMoreSelect: {
    type: Boolean,
    default: false,
  },
  fit: {
    type: Boolean,
    default: true,
  },
  border: {
    type: Boolean,
    default: false,
  },
  headerCellClassName: {
    type: String,
    default: "custmorTableHeader",
  },
  // 当前页
  currentPage: {
    type: Number,
    default: 0,
  },
  // 展示页数
  pageSize: {
    type: Number,
    default: 0,
  },
  //总页数
  totalNum: {
    type: Number,
    default: 0,
  },
  //多选
  handleSelection: {
    type: Function,
    default: () => {},
  },
});
// // 测试列宽
// /**
//  * el-table扩展工具  -- 列宽度自适应
//  * @param {*} prop 字段名称(string)
//  * @param {*} records table数据列表集(array)
//  * @returns 列宽(int)
//  */
// function getColumnWidth(prop: string, records: any) {
//   const minWidth = 80; // 最小宽度
//   const padding = 12; // 列内边距
//   const contentWidths = records.map((item: any) => {
//     console.log("item", item);
//     console.log("PROP", prop);
//     const value = item[prop] ? String(item[prop]) : "";
//     const textWidth = getTextWidth(value);
//     return textWidth + padding;
//   });
//   console.log("contentWidths", contentWidths);
//   let maxWidth = Math.max(...contentWidths);
//   if (maxWidth > 240) {
//     maxWidth = 240;
//   }
//   return Math.max(minWidth, maxWidth);
// }
// /**
//  * el-table扩展工具  -- 列宽度自适应 - 获取列宽内文本宽度
//  * @param {*} text 文本内容
//  * @returns 文本宽度(int)
//  */
// function getTextWidth(text: string) {
//   const span = document.createElement("span");
//   span.style.visibility = "hidden";
//   span.style.position = "absolute";
//   span.style.top = "-9999px";
//   span.style.whiteSpace = "nowrap";
//   span.innerText = text;
//   document.body.appendChild(span);
//   const width = span.offsetWidth + 5;
//   document.body.removeChild(span);
//   return width;
// }
// ...其他方法
const emit = defineEmits([
  "pagination",
  "update:currentPage",
  "update:pageSize",
  "selection-change",
]);
const page = useVModel(props, "currentPage", emit);
const size = useVModel(props, "pageSize", emit);
function handleSizeChange(val: number) {
  emit("pagination", { currentPage: page, pageSize: val });
}
function handleCurrentChange(val: number) {
  // console.log("val", val);
  page.value = val;
  emit("pagination", { currentPage: val, pageSize: props.pageSize });
}
const handleSelectionChange = (val: any) => {
  emit("selection-change", val);
};
const handleSelectable = (row: any) => {
  // console.log("row", row);
  return row.selectable;
};
 
.pagination {
  display: flex;
  justify-content: end;
  padding: 12px;
  margin-top: 5px;
  &.hidden {
    display: none;
  }
}

对于表格列宽实现了根据数据长度进行每一列的展示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/**
 * el-table扩展工具  -- 列宽度自适应
 * @param {*} prop 字段名称(string)
 * @param {*} records table数据列表集(array)
 * @returns 列宽(int)
 */
export function getColumnWidth(label: string, prop: string, tableData: any) {
  //label表头名称
  //prop对应的内容
  //tableData表格数据
  const minWidth = 90; // 最小宽度
  const padding = 10; // 列内边距
  const arr = tableData.map((item: any) => item[prop]);
  arr.push(label); //拼接内容和表头数据
  const contentWidths = arr.map((item: any) => {
    // console.log("item", item);
    // console.log("PROP", prop);
    const value = item ? String(item) : "";
    const textWidth = getTextWidth(value);
    return textWidth + padding;
  });
  // console.log("contentWidths", contentWidths);
  let maxWidth = Math.max(...contentWidths);
  if (maxWidth > 240) {
    maxWidth = 240;
  }
  return Math.max(minWidth, maxWidth);
}
/**
 * el-table扩展工具  -- 列宽度自适应 - 获取列宽内文本宽度
 * @param {*} text 文本内容
 * @returns 文本宽度(int)
 */
function getTextWidth(text: string) {
  const span = document.createElement("span");
  span.style.visibility = "hidden";
  span.style.position = "absolute";
  span.style.top = "-9999px";
  span.style.whiteSpace = "nowrap";
  span.innerText = text;
  document.body.appendChild(span);
  const width = span.offsetWidth + 5;
  document.body.removeChild(span);
  return width;
}

到此这篇关于vue3基于elementplus 简单实现表格二次封装过程的文章就介绍到这了,更多相关vue表格二次封装内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部!

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/js/10997.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部