Skip to content
本页目录

这里统计一些element-UI使用中的心得笔记

el-radio竖向排列

el-radio上添加 style="display:block;line-height: 30px"

html
<el-form-item label="原因" prop="rejected" size="mini">
        <el-radio-group v-model="formData.development" >
          <el-radio v-for="(item, key) in reasonList" :key="key" :label="item.key" style="display:block;line-height: 30px">
            {{item.label}}
          </el-radio>
        </el-radio-group>
      </el-form-item>

自定义el-table表格的表头

使用slot="header"设置自定义表头

html
<el-table-column type="expand" width="36">
  <template slot="header">
    <svg-icon icon-class="right" />
  </template>
  <template slot-scope="props">
    <el-table :data="props.row.children" border size="mini">
      <el-table-column v-if="props.row.product_type === 20" align="center" width="30">
        <template slot="header" slot-scope="scope">
          <el-checkbox :data-index="scope.$index" :indeterminate="props.row.isIndeterminate" v-model="props.row.selectAll" :disabled="props.row.children.length === 0" @change="handleCheckAllChange(props)" />
        </template>
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isSelected" :disabled="scope.row.isDisabled" @change="handleCheckedSkuChange(props)" />
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" align="center" width="60" />
    </el-table>
  </template>
</el-table-column>

scope.row.$index 错位

表格在添加排序后 :default-sort="{prop: 'xxxx', order: 'descending'}"

scope.row.$index会错位