【ElementUI】常用的组件使用实例和知识点

青烟小生
530 阅读1分钟

这是我参与11月更文挑战的第28天，活动详情查看：2021最后一次更文挑战

【ElementUI】常用的组件使用实例和知识点

ElementUI是饿了么的一个开源组件库，也是我们前端在开发时候常用的一个组件库，现在我们就来聊聊我在使用这个组件库的时候遇到的一些问题还有就是怎么解决的问题和一些不知道该怎么解决的问题，希望大家可以多多指教。

1.el-input现在只能输入数字

//添加oninput="value=value.replace(/[^\d]/g,'')"
<el-form-item label="邮政编码" prop="zip">
   <el-input clearable oninput="value=value.replace(/^\d{6}$/,'')" v-model="ruleForm.zip" placeholder="请输入邮政编码"></el-input>
</el-form-item>

2、日历插件的插槽报错，eslint报错（没解决）

这个问题一直没有办法解决，已经修改了几个版本也是不行，希望有大佬可以只会一声。

image-20211028090431057.png

3、<el-avatar>组件下头像切换不显示

在使用这个组件的时候发现切换其他图片的时候会导致头像都不显示的。头像的数据已经更新了，但是就是不显示，而且还有报错，后来经过多次查找发现需要添加一个属性:key="url"

<el-avatar :size="150" fit="fill" :src="url" :key="url"></el-avatar>

4、给表格添加自带的需要属性index

这个有两种，因为一般我们的表格是进行分页的，所以这个index会一直是你的返回的条数，如果你想要一直进行累加的话，就要自己结合页码来进行计算，如下：

<el-table-column type="index" label="序号" width="80" align="center">
              <template slot-scope="scope" class="center">
                <span class="center">
                  <span class="warn-bg-index">{{(page - 1) * limit + scope.$index + 1}}</span>
                </span>
              </template>
            </el-table-column>

5、在我们的前端拿到后端返回的数据的时候，需要在el-table的功能，并且在单元格里面加入输入框，为了让输入框的输入时候不会影响到其他的输入框，可以使用@input来获取输入框内容的值

<el-table> 
    <el-table-column prop="reality_fans" label="输入框" show-overflow-tooltip> 
        <template slot-scope="scope"> 
            <el-input v-model="scope.row.reality_fans" @change="funtion" @input='getNum' placeholder="请输入内容" class="group-inp"></el-input> 
        </template> 
    </el-table-column> 
</el-table>
avatar
文章
阅读
粉丝