建立网站模板,二环建设部网站,ui界面设计英文,wordpress釆集插件破解原文链接 重点就一个方法 :widthflexColumnWidth(‘date’,tableData) 第一个参数是这个列的字段 第二个参数是这个表格的数据 只需要给对应的列 el-table-column 标签加上此方法 即可做到此列自适应 其他的列想要自适应宽度 同样使用 :width 方法即可 此段代码可…原文链接 重点就一个方法 :widthflexColumnWidth(‘date’,tableData) 第一个参数是这个列的字段 第二个参数是这个表格的数据 只需要给对应的列 el-table-column 标签加上此方法 即可做到此列自适应 其他的列想要自适应宽度 同样使用 :width 方法即可 此段代码可直接复制使用 这是情景一 需要自适应宽度的数据string直接是在数组每一项下 templatediv stylewidth:1400px;el-table border :datatableData fit stylewidth: 100%el-table-column label日期 :widthflexColumnWidth(string,tableData)template slot-scopescopespan{{ scope.row.string }}/span/template/el-table-columnel-table-column propa labela/el-table-columnel-table-column propb labelb/el-table-columnel-table-column propc labelc/el-table-columnel-table-column propd labeld/el-table-columnel-table-column prope labele/el-table-columnel-table-column propf labelf/el-table-columnel-table-column propname label姓名/el-table-columnel-table-column propaddress label地址/el-table-column/el-table/div
/templatescriptexport default {data () {return {tableData: [{string: 条件他又长又短的, name: 王小虎, a: 12, b: 211, c: 11111111, d: 1, e: 11, f: 122, address: 上海市普陀区金沙江路 1518 弄},{string: 一二三四五六七八九十, name: 王小虎, a: 12, b: 211, c: 111, d: 1, e: 11, f: 122, address: 上海市普陀区金沙江路 1517 弄},{string: 条件他又长又短的的女分的看到偶尔偶尔饿哦偶尔分佛开口分配佛分富婆看哦考配哦, name: 王小虎, a: 111111, b: 211, c: 111, d: 1, e: 11, f: 122, address: 上海市普陀区金沙江路 1519 弄},{string: 条件他又长又看到配佛分富婆看哦考配哦, name: 王小虎, a: 12, b: 211, c: 111, d: 1, e: 11, f: 122, address: 123456789}]}},methods: {// 自适应表格列宽flexColumnWidth (str, arr1, flag max) {// str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);// flag为可选值可不传该参数,传参时可选max或equal,默认为max// flag为max则设置列宽适配该列中最长的内容,flag为equal则设置列宽适配该列中第一行内容的长度。str str let columnContent if (!arr1 || !arr1.length || arr1.length 0 || arr1 undefined) {return}if (!str || !str.length || str.length 0 || str undefined) {return}if (flag equal) {// 获取该列中第一个不为空的数据(内容)for (let i 0; i arr1.length; i) {if (arr1[i][str].length 0) {// console.log(该列数据[0]:, arr1[0][str])columnContent arr1[i][str]break}}} else {// 获取该列中最长的数据(内容)let index 0for (let i 0; i arr1.length; i) {if (arr1[i][str] null) {return}const now_temp arr1[i][str] const max_temp arr1[index][str] if (now_temp.length max_temp.length) {index i}}columnContent arr1[index][str]}// console.log(该列数据[i]:, columnContent)// 以下分配的单位长度可根据实际需求进行调整let flexWidth 0for (const char of columnContent) {if ((char A char Z) || (char a char z)) {// 如果是英文字符为字符分配8个单位宽度flexWidth 8} else if (char \u4e00 char \u9fa5) {// 如果是中文字符为字符分配15个单位宽度flexWidth 15} else {// 其他种类字符为字符分配8个单位宽度flexWidth 8}}if (flexWidth 80) {// 设置最小宽度flexWidth 80}// if (flexWidth 250) {// // 设置最大宽度// flexWidth 250// }return flexWidth px}}
}
/script 这是情景二 我们要自适应的这个列的数据字段 嵌套了一层 是在tableData每一个对象下的obj1对象里此时就需要将 flexColumnWidth 方法的 取值方式修改下直接修改成 arr1[i][obj1][string]和arr1[index][obj1][string]既去取每一项对象下obj1下的string。 代码可以直接复制使用
templatediv stylewidth:1300px;el-table border :datatableData fit stylewidth: 100%el-table-column label文字 :widthflexColumnWidth(string,tableData)template slot-scopescopeel-input v-modelscope.row.obj1.string/el-input/template/el-table-columnel-table-column propa labela/el-table-columnel-table-column propb labelb/el-table-columnel-table-column propc labelc/el-table-columnel-table-column propd labeld/el-table-columnel-table-column prope labele/el-table-columnel-table-column propf labelf/el-table-columnel-table-column propname label姓名/el-table-columnel-table-column propaddress label地址/el-table-column/el-table/div
/templatescriptexport default {data () {return {tableData: [{obj1: { string: 条件他又长又短的 }, name: 王小虎, a: 12, b: 211, c: 11111111, d: 1, e: 11, f: 122, address: 上海市普陀区金沙江路 1518 弄},{obj1: { string: 一二三四五六七八九十 }, name: 王小虎, a: 12, b: 211, c: 111, d: 1, e: 11, f: 122, address: 上海市普陀区金沙江路 1517 弄},{obj1: { string: 条件他又长又短的的女分的看到偶尔偶尔饿哦偶尔分佛开口分配佛分富婆看哦考配哦 }, name: 王小虎, a: 111111, b: 211, c: 111, d: 1, e: 11, f: 122, address: 上海市普陀区金沙江路 1519 弄},{obj1: { string: 条件他又长又看到配佛分富婆看哦考配哦 }, name: 王小虎, a: 12, b: 211, c: 111, d: 1, e: 11, f: 122, address: 123456789}]}},methods: {// 自适应表格列宽flexColumnWidth (str, arr1, flag max) {console.log(str)// str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);// flag为可选值可不传该参数,传参时可选max或equal,默认为max// flag为max则设置列宽适配该列中最长的内容,flag为equal则设置列宽适配该列中第一行内容的长度。str str let columnContent if (!arr1 || !arr1.length || arr1.length 0 || arr1 undefined) {return 80px // 给个默认的}if (!str || !str.length || str.length 0 || str undefined) {return 80px // 给个默认的}if (flag equal) {// 获取该列中第一个不为空的数据(内容)for (let i 0; i arr1.length; i) {if (arr1[i][obj1][string].length 0) {// console.log(该列数据[0]:, arr1[0][obj1][string])columnContent arr1[i][obj1][string]break}}} else {// 获取该列中最长的数据(内容)let index 0for (let i 0; i arr1.length; i) {if (arr1[i][obj1][string] null) {return}const now_temp arr1[i][obj1][string] const max_temp arr1[index][obj1][string] if (now_temp.length max_temp.length) {index i}}columnContent arr1[index][obj1][string]}// console.log(该列数据[i]:, columnContent)// 以下分配的单位长度可根据实际需求进行调整let flexWidth 0for (const char of columnContent) {if ((char A char Z) || (char a char z)) {// 如果是英文字符为字符分配8个单位宽度flexWidth 8} else if (char \u4e00 char \u9fa5) {// 如果是中文字符为字符分配15个单位宽度flexWidth 15} else {// 其他种类字符为字符分配8个单位宽度flexWidth 8}}if (flexWidth 80) {// 设置最小宽度flexWidth 80}// if (flexWidth 250) {// // 设置最大宽度// flexWidth 250// }// 可以再多留部分的paddingflexWidth 30return flexWidth px}}
}
/script 情景三在表格的总宽度不够时候会出现滚动条 是正常的。此时剩余的每列会自动平均分配获得相等宽度 情景四也可以手动给剩余的分配列宽比例 注意是两种数据结构 两种方法的细节不一样
