element-ui表格列宽度根据内容计算最小宽度min-width实现自适应参考

element ui的表格列

遍历tableData 与表头，找出该列最长的字符max
创建span标签计算最长字符所占宽度offsetWidth
设置min-width属性(String类型）
在组件渲染前计算出最小宽度，避免表格渲染过程宽度高度不稳定

其他方案参考：1. render-header 计算出宽度，然后渲染表头 2. header 插槽

<script>
/*** @description: 计算字符串的字节长度* @param {*} str* @return {*}*/
function strByteLength(str) {if (!str) return 0let len = str.lengthfor (let i = 0; i < str.length; i++) {if (str.charCodeAt(i) > 255) { len++ }}return len
}
/*** copy:* 1.超出长度可复制* 2. 设置canCopy = true*/
import tableColumn from './TableColumn.vue'export default {components: {tableColumn},render(h) {/*** 计算minWidth,是否可复制* minWidth/maxWidth   string eg: 60px*/const { label, prop, formatter, sortable } = this.$attrsconst tableData = this.$attrs['table-data']const minWidth = this.$attrs['min-width']const maxWidth = this.$attrs['max-width']const max = { str: '', length: 0 }const strs = tableData.map(item => {if (formatter && typeof formatter === 'function') {return formatter(null, null, item[prop], null)} else {return item[prop]}})strs.unshift(label)strs.forEach((item, i) => {const len = strByteLength(item)if (len > max.length) {max.str = itemmax.length = lenmax.i = i}})const span = document.createElement('span')span.innerHTML = max.strlet width = document.body.appendChild(span).offsetWidth + 20// 如果有排序 排序箭头宽度24if (sortable) {span.innerHTML = labelconst labelWidth = document.body.appendChild(span).offsetWidth + 20 + 24if (labelWidth > width) width = labelWidth}document.body.removeChild(span)let minW = 60if (typeof minWidth === 'string') {minW = minWidth.match(/\d*/)[0] * 1}let maxW = 240if (typeof maxWidth === 'string') {maxW = maxWidth.match(/\d*/)[0] * 1}// 超出长度 可复制if (width >= maxW) {width = maxW}if (width <= minW) {width = minW}const reMinWidth = isNaN(width) ? '' : width + 'px'return (<tableColumn minWidth={reMinWidth} {...{ attrs: this.$attrs }}/>)}
}
</script>

// tableColumn.vue
// 根据需求扩展column
<template><el-table-column v-if="type === 'index'" v-bind="$props" /><el-table-column v-else v-bind="{ ...$props, ...$attrs}" />
</template>

复制指令

clipboard: {// inserted 可获取父元素inserted: (el, binding) => {if (!binding.arg) returnconst button = document.createElement('a')button.innerHTML = '复制'button.className = 'cell-copy-btn hidden'button.handler = (e) => {e.stopPropagation()const content = el.innerTextif (!content) {button.innerText = '无复制内容'}const textarea = document.createElement('textarea')textarea.readOnly = 'readonly'textarea.style.position = 'absolute'textarea.style.left = '-9999px'textarea.value = contentdocument.body.appendChild(textarea)textarea.select()const res = document.execCommand('Copy')if (res) {button.innerText = '已复制'button.removeEventListener('click', button.handler, true)setTimeout(() => {button.innerText = '复制'button.addEventListener('click', button.handler, true)}, 2000)}document.body.removeChild(textarea)}button.addEventListener('click', button.handler, true)el.button = buttonel.parentNode.appendChild(el.button)el.showButton = () => {el.button.classList.remove('hidden')}el.hideButton = () => {el.button.classList.add('hidden')}const element = el.parentNodeelement.addEventListener('mouseenter', el.showButton, { passive: false })element.addEventListener('mouseleave', el.hideButton, { passive: false })},unbind(el, binding) {if (!binding.arg) returnconst element = el.parentNodeif (element) {element.removeEventListener('mouseenter', el.showButton, { passive: false })element.addEventListener('mouseleave', el.hideButton, { passive: false })}}}

element-ui表格列宽度根据内容计算最小宽度min-width实现自适应参考相关推荐

Vue+Element UI表格列的显示和隐藏
如下代码: <template><div><el-table:data="tabledate"height="400">// ...
element ui 表格合并行和列
element ui 表格合并行和列 <el-table:data="tableData":span-method="arraySpanMethod"bo ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
element UI 表格实现表尾合计行 ——小肉包
element UI 表格实现表尾合计行 --小肉包可以根据需要计算任意列的合计,效果图如下说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...
element UI表格绑定动态数据与selection复选操作
element UI表格绑定动态数据与selection复选操作的坑案例介绍:此案例是要求完成对客户的批量删除功能,因为客户有多条数据所以要结合分页组件来实现,并且批量删除按钮默认是禁用的,当有数据 ...
element UI 表格做下滑滚动效果，请求接口数据
element UI 表格做下滑滚动效果,请求接口数据,内容记录 import { ElMessage } from "element-plus"; // vue3.0 引入方式/ ...
element ui表格中的algin属性无效
我们在使用element ui表格中,经常需要调整表格内容的文字对齐位置,例如: 文档中描述是使用algin="left / right / center"调整文字对齐,但是我们使 ...
element ui 表格，通过下载按钮下载生成Excel表格
element ui 表格,通过下载按钮下载生成Excel表格,内容记录 // 安装插件 xlsx 和 file-saver import XLSX from "xlsx"; im ...
element ui el-dialog 居中，并且内容多的时候内部可以滚动
element ui el-dialog 居中,并且内容多的时候内部可以滚动 <el-dialog title="图标设置" :visible.sync="icon ...

element-ui表格列宽度根据内容计算最小宽度min-width实现自适应参考

element-ui表格列宽度根据内容计算最小宽度min-width实现自适应参考相关推荐

最新文章

热门文章