element-UI-----vue组件使用小技巧

1. value-format="yyyy-MM-dd" 将时间选择器选中的时间对象格式化为字符串，例如 2023-05-09(vue2)

<el-form-item label="活动日期" prop="actionTime">
    <el-date-picker v-model="ruleForm.actionTime" type="date"  value-format="yyyy-MM-dd">
    </el-date-picker>
</el-form-item>

<el-date-picker
    v-model="ruleForm.time"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    >
</el-date-picker>
<!-- 时间段选择器得到的数据为： [ "2023-01-11T16:00:00.000Z", "2023-02-15T16:00:00.000Z" ] -->
但我们一般需要的结构为  2023-01-11~2023-02-15
解决的方式有两种，
第一种：在时间段选择器组件结构上写 value-format="yyyy-MM-dd"
               <el-date-picker
                    v-model="ruleForm.time"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                >
第二种：js代码处理数据 
                       ruleForm.start_date = parseTime(
                            ruleForm.time[0],
                            "{y}-{m}-{d}"
                        );
                        ruleForm.end_date = parseTime(
                            ruleForm.time[1],
                            "{y}-{m}-{d}"
                        );

vue3使用时间选择器（

两个要点：value-format="YYYY-MM-DD HH-mm-ss" 表示时间格式

直接写style的width格式就可以改时间选择器的宽高

）

直接在时间选择器组件上写 style="width:150px;" 就可以修改时间选择器的宽

<el-date-picker v-model="searchForm.beginTime" value-format="YYYY-MM-DD" type="date" 
   placeholder="请输入开始日期" style="width:150px;" />
<span style="margin: 0px 20px;">到</span>
<el-date-picker v-model="searchForm.endTime" value-format="YYYY-MM-DD" type="date" 
   placeholder="请输入结束日期" style="width:150px;"/>

2. :preview-src-list="[org.img_urlAll]" 让图片可以大图预览

<el-image 
   style="width: 100px; height: 100px"
   :src="org.img_urlAll" 
   :preview-src-list="[org.img_urlAll]">
</el-image>

3. filter使用

if(this.sqName == "zksq"){
      this.data = this.arrData.filter((item) => {
        return item.label != "人大代表工作室" && item.label != "立法联系点"
      })
    }

4.align='center' 就可以让vue的表格组件里的内容上下左右居中

<el-table-column prop="date" 
   label="日期"
   width="180"
   align='center'> 
</el-table-column>

5. 输入框组件用 label-width="50px" 和 style="width: 100px;" 都可以设置宽，但前提是el-form的外层容器设置宽属性 且 设置 inline 属性

 <el-dialog title="增加人物画像" :visible.sync="dialogFormVisible" width="500px">
     <el-form :model="formInline" ref="formInline" :inline=true >
        <el-form-item label="人物画像" label-width="80px" >
            <el-input v-model="formInline.name"  style="width: 100px;"  autocomplete='off'/>
            </el-form-item>
     </el-form>
 </el-dialog>
        
 autocomplete='off'   不让浏览器自动填充历史记录

6.设置 inline 属性可以让表单域变为行内的表单域

<el-form :inline="true" :model="formInline" class="demo-form-inline">

 7.删除之前提示一下

this.$alert('确定要删除吗？', '确认提示', {
  confirmButtonText: '确定'
}).then(() => {
  this.$store.dispatch('womFried/delete_womenUser', row.a7)
      .then((res) => {
        this.$message.success('操作成功')
        this.getList()
      })
      .catch((e) => {
        console.log('catch',e)
      })
      .finally(() => {
        this.loading = false;
      });
  }) 
}