elementUI组件库的一些使用

2021-10-09 14:15:32 浏览数 (1)
elementUI的el-table表格多选功能之禁用多选

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

所以我们可以这样写

代码语言：javascript复制
<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>
复制代码
代码语言：javascript复制
selectable(row,index) {
    return row.pro_status === 'review' //通过某个值来进行判断，规定那一行的选择框被禁用
}
复制代码
el-card的点击事件失效的解决方式
代码语言：javascript复制
@click = 'link'

改为

@click.native = 'link'//变成原生绑定
复制代码
elementUI的日期选择器获取选择时间的格式，获取时间戳等

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

比如传时间戳

代码语言：javascript复制
value-format="timestamp"
复制代码
代码语言：javascript复制
<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’格式

代码语言：javascript复制
value-format="yyyy-MM-dd"
复制代码
代码语言：javascript复制
<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的自动上传带参数
代码语言：javascript复制
<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来进行数据的整合和传输

代码语言：javascript复制
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)
        });            
    },
elementui

0 人点赞