elementUI组件库的一些使用

·  阅读 828
elementUI组件库的一些使用

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

elementUI的el-table表格多选功能之禁用多选

在进行表格的多选的时候我们会碰到那种,只允许部分内容可以被选择,不符合的要禁用多选框,这个时候就要用到elementUI el-tableselectable

在这里插入图片描述

所以我们可以这样写

<el-table :data="tableData" border v-loading='loading' size="small" @selection-change="handleSelectionChange">
    <el-table-column v-if="type==='admin'" type="selection" :selectable="selectable" width="55"></el-table-column>
    <el-table-column label="状态" prop="tips" width="150"></el-table-column>
</el-table>
复制代码
selectable(row,index) {
    return row.pro_status === 'review' //通过某个值来进行判断,规定那一行的选择框被禁用
}
复制代码

el-card的点击事件失效的解决方式

@click = 'link'

改为

@click.native = 'link'//变成原生绑定
复制代码

elementUI的日期选择器获取选择时间的格式,获取时间戳等

在使用日期选择器的时候,我们需要把时间进行格式化,然后再传给后端

比如传时间戳

value-format="timestamp"
复制代码
<el-form-item label="申请人生日" required>
        <el-date-picker type="date" value-format="timestamp" placeholder="申请人生日" v-model="ruleFormUser.date1" style="width: 100%;">     </el-date-picker>
</el-form-item>
复制代码

比如‘yyyy-MM-dd’格式

value-format="yyyy-MM-dd"
复制代码
<el-form-item label="申请人生日" required>
        <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="申请人生日" v-model="ruleFormUser.date1" style="width: 100%;">        </el-date-picker>
</el-form-item>
复制代码

el-upload的自动上传带参数

<el-form-item label="商品照片">
              <el-upload
                class="upload-demo"
                action="#"
                multiple
                :limit="1"
                :auto-upload="true"
                :show-file-list='false'
                :file-list="fileList"
                :http-request="imageChange"
                accept="image/png,image/gif,image/jpg,image/jpeg">
                <el-button class="upbtn" :loading='srcload'>上传商品照片</el-button>
              </el-upload>
            </el-form-item>
复制代码

通过formData来进行数据的整合和传输

imageChange(param,type){
        let formData = new FormData()
        formData.append('file', param.file)
        formData.append("s_id", localStorage.s_id)
        formData.append("img_kind", 'open')
        this.$axios.post(`${this.$baseUrl}/image/upload`, formData).then(res => {
          if(res.data.ret){
            this.$message.success('上传成功')
          }else{
            this.$message.error('上传失败'+res.data.msg)
          }
        }).catch(function (error) {
          this.$message.error('上传失败'+res.data.msg)
        });            
    },
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改