element-ui中常见问题(一)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

1、el-table中el-table-column表头名称自适应列宽

• min-width：对应列的最小宽度，剩余宽度按比例分配给设置了min-width的列
• :min-width="item.width ? item.width : (item.label.length * 22 > 80 ? item.label.length * 22 : 80)"

<el-table-column :show-overflow-tooltip="true" v-for="item in tableList" :key="item.key" :prop="item.key" :label="item.label" :type="item.type" :min-width="item.width ? item.width : (item.label.length * 22 > 80 ? item.label.length * 22 : 80)">
</el-table-column>

2、el-table中el-table-column根据不同状态显示不同颜色

• callback：点击回调函数
• setColor：根据数据的值返回不同颜色

<el-table-column :show-overflow-tooltip="true" v-for="item in tableList" :key="item.key" :prop="item.key" :label="item.label" :type="item.type">
  <template v-else-if="item.type === 'colorText'" v-slot="scope">
    <span :style="{ color: item.setColor && item.setColor(scope.row) }" @click.stop="item.callback(scope.row,item)">{{scope.row[item.key]}}</span>
  </template>
</el-table-column>

tableList: [
  { 
    key: "status", 
    label: "状态", 
    type: 'colorText', 
    callback: (row: IAnyJsonListItem) => {}, 
    setColor: (row: IAnyJsonListItem) => {
      return row.status === 10 ? 'red' : 'green'
    }
  },
]

3、element-ui的el-table翻页多选，在数据更新之后保留之前选中的数据

• reserve-selection是否翻页多选保留之前选中的数据
• row-key：当reserve-selection为true时，该属性是必填的
• 清空所有选中数据使用hooksCommonState.tableRef.clearSelection();
• selection-change: 当选择项发生变化时会触发该事件

<el-table @selection-change="handleSelectionChange" :row-key="rowKey" border :data="tableData" v-loading="tableLoading" stripe>
  <el-table-column type="selection" :selectable="selectable" :reserve-selection="true"></el-table-column>
</el-table>

4、element-ui的el-table添加数据汇总

• show-summary：是否在表尾显示合计行
• summary-method：自定义的合计计算方法

<el-table :show-summary="summary" :summary-method="getSummaries"></el-table>

const getSummaries =(param: IAnyJsonListItem) => {
  const { columns, data } = param;
  const sums: any[] = [];
  // 需要合计的字段
  const sumKey: any[] = ['totalQty']
  columns.forEach((column: IAnyJsonListItem, index: number) => {
    if (index === 0) {
      sums[index] = '小计';
      return;
    }
    const values = data.map((item:IAnyJsonListItem) => item[column.property]);
    if (!values.every((value:any) => isNaN(value)) && sumKey.includes(column.property)) {
      sums[index] = values.reduce((prev:any, curr:any) => {
        const value = Number(curr);
        if (!isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0);
    } else {
      sums[index] = '';
    }
  });
  return sums;
}

5、下拉多选框，多选后出现样式错乱问题

样式错乱：

解决方案： 把.el-select__tags的width和max-width都改成101%

:deep(.el-select__tags) {
    width: 101% !important;
    max-width: 101% !important;
  }

修改后效果：

6、输入值可为正数和负数，但不得为0或空

• rules：表单验证规则，required为true是必须输入，trigger为设置校验的触发方式，其中change为改变数据时触发
• validator：验证器来自定义校验规则
• new Error：抛出检验异常
• callback()：完成校验

rules: {
  amount: [{ 
    required: true, 
    trigger: "change", 
    validator: (rule: any, value: any, callback: any) => validatorMethod(rule, value, callback) 
  }],
},

validatorMethod方法

const validatorMethod = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入非空值'))
  } else if (value === 0) {
    callback(new Error("请输入非零数"))
  } else {
    callback()
  }
}

效果：

7、处理弹窗层级和下拉选择框层级问题

弹窗里的下拉选择框添加属性popper-class="pagination-popper", 添加样式.pagination-popper { z-index:999999 !important; }