这里统计一些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会错位