elment 遇到的问题

华而有识

已于 2023-07-26 13:02:26 修改

阅读量386

点赞数

文章标签： vue.js

于 2023-04-11 10:39:23 首次发布

本文链接：https://blog.csdn.net/FrontEndEngineer/article/details/130077266

版权

1. 手机端固定列影响列合并问题

如图，固定前两列后，表格标题的列合并失效
解决方法

第一步：在el-table中添加 :span-method="objectSpanMethod"

<el-table
          class="uptable"
          :span-method="objectSpanMethod"
          :data="mytableData"

第二步：在objectSpanMethod 方法中重新设置列合并

  public objectSpanMethod({ row, column, rowIndex, columnIndex }: any) {
    
    $('.uptable .el-table__fixed-header-wrapper .el-table_1_column_1').attr('colspan','2').css("text-align",'center')
    $('.uptable .el-table__fixed-header-wrapper .el-table_1_column_2').css('display','none')

  }

2.手机端合计位于第一行后的列排序问题（排序如何去除合计进行排序）

第一步：在el-table中添加 @sort-change="soltHandle"

<el-table
        class="customTable"
        ref="multipleTable"
        :data="tableData"
        border
        @sort-change="soltHandle"

第二步：在soltHandle 方法中去除合计数据进行排序（数组中第一条数据为合计数据）

  public soltHandle(column: any, prop: any, order: any) {
    //获取需要排序的字段名称和排序类型
    let fieldName = column.prop;
    let sortingType = column.order;
    if (sortingType === 'ascending') {
      let table = this.tableData;
      let table2 = table.slice(1,this.tableData.length);
      let table1 = table.slice(0,1).concat(table2.sort((a: any, b: any) => a[fieldName] - b[fieldName]))
      //升序
      this.tableData = table1;
    } else if (sortingType === 'descending') {
      let table = this.tableData;
      let table2 = table.slice(1,this.tableData.length);
      let table1 = table.slice(0,1).concat(table2.sort((a: any, b: any) => b[fieldName] - a[fieldName]))
      //降序
      this.tableData = table1;
    }
  }

3.el-table-column中嵌套el-form-item并进行校验

<el-form-item
:prop="`tableData.${$index}.input`"
:rules="rules.input"
>

 //html部分
 <el-form :model="form" label-position="left" label-width="100" ref= "form">
        <el-form-item label="其他表单项" prop="name" :rules="rules.name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
     
          <el-table :data="form.tableData" border stripe>
            <el-table-column label="该列单元格校验">
              <template slot-scope="{ row, $index }">
                <el-form-item
                  :prop="`tableData.${$index}.input`"
                  :rules="rules.input"
                >
                  <el-input v-model="row.input"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
      </el-form>
 // data部分
  form: {
        name: "",
        tableData: [
          { input: "" },
          { input: "" },
          { input: "" },
          { input: "" },
          { input: "" }
        ]
      },
      rules: {
        name: [
          { required: true, trigger: ["blur", "change"], message: "请选择" }
        ],
        input: [
          { required: true, trigger: ["blur", "change"], message: "请选择" }
        ]
      },

4.el-table添加行或删除行

//添加
 this.allData.companies_list.push({
      contract_name: '',
      contract_number: ''
      ]
 })

//删除
 deleteReinusranceContract(index, row) {
    this.$confirm('确认删除吗', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      center: true
    }).then(() => {
      this.allData.companies_list.splice(index, 1)
    })
  }

5.渲染层级太多造成的页面不刷新问题如何解决

先delete再$set

changeCheck(index: any, index1: any) {
    var allData = this.allData;
    var checked = !allData.companies_list[index].companies[index1].checked;
    delete this.allData.companies_list[index].companies[index1].checked;
    delete this.allData.companies_list[index].companies[index1].disabled;
    this.$set(this.allData.companies_list[index].companies[index1], 'checked', checked)
    this.$set(this.allData.companies_list[index].companies[index1], 'disabled', !checked)
}

6.渲染层级太多el-checkbox中v-model 失效如何解决
:value 或：check

<el-checkbox :disabled="isEdit" :label="radioItem.company_name"
     :value="radioItem.checked">
     {{ radioItem.company_name}}
</el-checkbox>

<el-checkbox :disabled="isEdit" :label="radioItem.company_name"
     :check="radioItem.checked">
     {{ radioItem.company_name}}
</el-checkbox>

7. elment支持多选

<el-tooltip effect="dark" placement="right" :disabled="tooltipShow" v- 
      if="sellChannel=='3'">
  <div v-for="(item, index) in newArr" :key="index">{{ item }}</div>
      <el-select v-model="bankName" multiple 
          @change="bankNameChange" 
          placeholder="请选择" style="width: 396px">
          <el-option v-for="(item, index) in bankNameList" 
                :key="index" 
                :label="item.enum_name" 
                :value="item.enum_code"
             :disabled="item.disabled">
           </el-option>
      </el-select>
</el-tooltip>


 bankName:any = [''];
 bankNameList: any = [];
 newArr: any = [];
 tooltipShow = true;


 bankNameChange(val: any){
    this.newArr = [];
    let tempArr = this.bankName.slice(3);
    if (this.bankName.length > 3) {
      tempArr.map((item: any) => {
        return item;
      });
      this.bankNameList.forEach((k: any) => {
        tempArr.forEach((q: any) => {
          if (q == k.enum_code) {
            this.newArr.push(k.enum_name);
          }
        });
      });
      this.tooltipShow = false;
    } else {
      this.tooltipShow = true;
    }

    if (val[0] == '' && val.length > 1) {
      this.bankName.shift();
    } else {
      val.forEach((item: any, index: number) => {
        if (item === '') {
          this.bankName = [val[val.length - 1]];
          this.tooltipShow = true;
          this.newArr = [];
        }
      });
    }
    if (this.bankName == '') {
      this.bankName = [''];
    }
  }

 
  productManagedApi.getEnum({ enum_type: 'bankName' }).then((res: any) => {
      this.bankNameList = res.data.defmap.reportEnumerates;
      this.bankNameList.unshift({ enum_code: '', enum_name: '全部' });
  });

// 隐藏两个个之后的所有Tag，并在第三个Tag之前展示...
/deep/ .el-tag.el-tag--info:nth-child(n + 3) {
  width: 0;
  padding: 0;
  height: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0);
  border-color: unset;
  background: none;
  i {
    display: none;
  }
}
/deep/ .el-tag.el-tag--info:nth-child(3) {
  position: relative;
  &:before {
    content: '...';
    position: absolute;
    left: 4px;
    top: -12px;
    width: 26px;
    height: 24px;
    padding: 0 8px;
    line-height: 22px;
    font-size: 12px;
    background-color: #f4f4f5;
    color: #909399;
    box-sizing: border-box;
    border: 1px solid #e9e9eb;
    border-radius: 4px;
  }
}

8. el-table 自适应列宽

说到自适应列宽，网友们肯定会想到使用插件属性 fit，尝试后发现，fit 只针对表头，不能根据数据内容自动撑开

这里提供一个新思路：将需要自适应列的数据（包含表头）进行长度比较，最长的数据的宽度设置为当前列的宽度

  <el-table-column
        prop="piecespremium"
        label="件均保费(元)"
        :formatter="stateFormat"
        header-align="center"
        align="right"
        :width="flexColumnWidth(tableData,'件均保费(元)','piecespremium')"
      >
        <template slot-scope="scope">
          {{ scope.row.piecespremium == '' ? '--' : stateFormat(scope.row.piecespremium) }}
        </template>
 </el-table-column>

 flexColumnWidth(data,label, prop) {
    // 1.获取该列的所有数据
    const arr = data.map(x => x[prop])
    arr.push(label) // 把每列的表头也加进去算
    // 2.计算每列内容最大的宽度 + 表格的内间距（依据实际情况而定）
    return (this.getMaxLength(arr) + 30) + 'px'
  }
  getMaxLength(arr) {
    return arr.reduce((acc, item) => {
      if (item) {
        const calcLen = this.getTextWidth(item)
        if (acc < calcLen) {
          acc = calcLen
        }
      }
      return acc
    }, 0)
  }
  /**
   * 使用span标签包裹内容，然后计算span的宽度 width： px
   */
  getTextWidth(str) {
    let width = 0
    const html = document.createElement('span')
    html.innerText = str
    html.className = 'getTextWidth'
    document.querySelector('body').appendChild(html)
    width = document.querySelector('.getTextWidth').offsetWidth
    document.querySelector('.getTextWidth').remove()
    return width
  }

.getTextWidth{
  font-size: 12px;
}