投稿
  1. 蓝洛水深Home
  2. element

element

  • 如何通过beforeUpload对Element的上传组件提供上传确认功能 软件

    如何通过beforeUpload对Element的上传组件提供上传确认功能

    如果这里直接写判断，则是不行的，官方的文档写的是： before-upload 上传文件之前的钩子，参数为上传的文件， 若返回false或者返回 Promise 且被 reject，则停止上传。 所以，这里可以参考的写法是这样：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function beforeUpload() {
      // 弹窗确认
      return new Promise((resolve) => {
        ElMessageBox.confirm('确定上传文件吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          resolve(true)
        }).catch(() => {
          resolve(false)
        })
      })
    }

    这样，即可做到上传前的确认。

    蓝洛水深的头像 蓝洛水深
    2024年3月28日
    0670
  • Element Plus约束上传文件类型的两种方法 未分类

    Element Plus约束上传文件类型的两种方法

    第一种

    1
    :ext="['xlsx', 'xls', 'wps']"

    这样既可上传指定类型的文件，其他格式的文件会报错。 但实际体验不是很好，所以需要和第二种进行配合。 第二种

    1
    accept=".xlsx,.xls,.wps"

    这样在弹出的文件选择框内，就只会显示限定的文件类型，在体验上就会好很多。

    蓝洛水深的头像 蓝洛水深
    2023年2月28日
    07160
  • VUE Elements报Elements in iteration expect to have 'v-bind:key' directives解决办法 网站

    VUE Elements报Elements in iteration expect to have ‘v-bind:key’ directives解决办法

    如下图所示，编辑器报错，但是前端能正常运行。 VUE中是简单这样示例的，但是实际上应该加上：key

    1
    2
    3
    <div v-for="item in items">
      {{ item.text }}
    </div>

    加上之后，上面的代码变成

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
                    <el-table-column prop="financial_money_received" width="120" align="center" sortable label="实收金额">
                        <template #default="scope">
                            <el-popover effect="light" trigger="hover" placement="top" width="auto">
                                <template #default>
                                    <div v-if="scope.row.temp_financial_money_received ==null">
                                        查无记录
                                    </div>
                                    <div v-else-if="scope.row.temp_financial_money_received.length === 0">
                                        查无记录
                                    </div>
                                    <div v-else>
                                        <div v-for="(item,index) in scope.row.temp_financial_money_received" :key="index">
                                            {{ item.date }}
                                        </div>
                                    </div>
                                </template>
                                <template #reference>
                                    <el-tag>{{ scope.row.financial_money_receivable }}</el-tag>
                                </template>
                            </el-popover>
                        </template>
                    </el-table-column>

    因为的元素中，并没有KEY字段，所以要引用一个索引作为KEY，当然，如果你有KEY，直接以对应KEY即可。

    蓝洛水深的头像 蓝洛水深
    2022年7月8日
    06760
  • VUE中，如何用v-if判断为空或者为[]{}情况 网站

    VUE中，如何用v-if判断为空或者为[]{}情况

    因为项目调整，原来是layui的，该字段此前并没有使用json数据，所以要么为空，要么为字符串。 升级后，项目使用VUE+element，这个字段也升级成为json数据或者为空的[]。 那么，在列表中，要如何呈现呢？ 直接上代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <el-table-column prop="financial_money_received" width="120" align="center" sortable label="实收金额">
                        <template #default="scope">
                            <el-popover effect="light" trigger="hover" placement="top" width="auto">
                                <template #default>
                                    <div v-if="scope.row.temp_financial_money_received ==null">
                                        查无记录
                                    </div>
                                    <div v-else-if="scope.row.temp_financial_money_received.length === 0">
                                        查无记录
                                    </div>
                                    <div v-else>
                                        <div> {{ scope.row.temp_financial_money_received }}</div>
                                    </div>
                                </template>
                                <template #reference>
                                    <el-tag>{{ scope.row.financial_money_receivable }}</el-tag>
                                </template>
                            </el-popover>
                        </template>
                    </el-table-column>

    第一个判断，先判断是否是老数据的null，也就是为空[crayon…

    蓝洛水深的头像 蓝洛水深
    2022年7月8日
    03.7K0
联系QQ
联系QQ
SHARE
TOP