请问这个给element ui动态赋值列宽度的函数 有什么问题呀 求解

  • Z时代
  • 2024-02-19
  • 分类：IT

请问这个给element ui动态赋值列宽度的函数 有什么问题呀 求解

// 我循环了element ui 表格列，想动态设置:label和:width
// 两个同理  方式不同  但是:width这样就不行
 <el-table
      v-if="tableShowHide"
      v-loading="loading"
      id="allDataTable"
      :data="tableDataPass"
    >
    // item是每一列 列名
      <div>
        <el-table-column
          sortable="custom"
          v-for="(item, index) in userSelectColumn"
          :key="index"
          :prop="item"
          :label="hearderName[item]"
          :width="rowWidth(item)"
        >
        ......
       </el-table-column>
 </el-table>
// 这个方法我想用rowWidth来配置 指定列的宽度 
// 想问一下为什么rowWidth只有循环的最后一个宽度在表格生效 
// 但是像:label 这样 直接用item做key就可以 请问rowWidth这样有什么问题吗
// 这个item也是循环的呀  整个函数不也是循环返回吗
 rowWidth(val) {
      let widths = ''
      if (tableRowWidth.length > 0) 
      {
        this.allTableConfig.tableRowWidth.forEach((u) => {
          if (u.title === val) {
            widths = u.width
          } else {
            widths = ''
          }
        })
      } else {
        widths = ''
      }
      return widths
    },
// 这是要匹配的列对应宽度的数据
  tableRowWidth: [
          { title: 'ID', width: '80' },
          { title: 'Year', width: '80' },
        ]
// :label和:width同理 但是为什么函数返回就只有最后一个有效呢
// 这样直接取key就可以全部列生效 
 hearderName: {
          ID: '123',
          'Year': '456'
        },

回答：

因为函数写的有问题，你捋一下，就拿ID来说，tableRowWidth循环两次，第一次命中，设置了width，但是第二次没有命中，又把widths设置为了空。（ps：你这个tableRowWidth.length > 0的判断没报错吗）

函数改成下面这样

rowWidth(val) {
    let item = this.allTableConfig.tableRowWidth.find(u => u.title === val)
    return item ? (item.width || '') : ''
}

以上是 请问这个给element ui动态赋值列宽度的函数 有什么问题呀 求解 的全部内容， 来源链接： utcz.com/p/935956.html

回到顶部