Web：前端框架 - 浮生一梦

这里面的内容可能很杂乱，因为要记录使用过程中的一些问题。前端的框架不止是应用框架，也包含 UI 框架等等。

EP：Element Plus

若依

form 表单图片上传

<el-form-item label="图片上传" prop="img">
    <!-- 限制只能上传一张 -->
    <image-upload v-model="form.img" :limit="1" />
</el-form-item>

预览时：

<el-table-column label="图片" align="center" prop="img">
    <!-- vue3 的写法 -->
    <template #default="scope">
        <image-preview :src="scope.row.img" :width="50" :height="50"/>
    </template>
</el-table-column>

若依中默认的图片上传功能会上传到本地的路径，这个路径在配置文件中可以更改。

前端上传组件调用后端的上传接口，上传到指定位置后拿到返回的图片路径绑定到 form 表单中的字段，随保存/修改接口调用而提交保存到数据库中。

字典类型

Vu3 + EP:

<!-- 表单列表 -->
<el-table-column label="类型" align="center" prop="typeCode">
    <template #default="scope">
        <dict-tag :options="type_code" :value="scope.row.typeCode" />
    </template>
</el-table-column>

<!-- 添加或修改表单 -->
<el-form-item label="类型" prop="typeCode">
    <el-select v-model="form.typeCode" placeholder="请选择类型">
    <el-option v-for="dict in type_code"
        :key="dict.value"
        :label="dict.label"
        :value="dict.value"
    />
    </el-select>
</el-form-item>

<script setup>
const { proxy } = getCurrentInstance();
// types 是数据库的键值
const { type_code } = proxy.useDict("type_code");
</script>

单选框

<!-- 表单列表 -->
<el-table-column label="是否隔离" align="center" prop="geli" >
    <template #default="scope">
        <span>{{ scope.row.geli === 0 ? '是' : '否' }}</span>
    </template>
</el-table-column>

<!-- 添加或修改表单 -->
<el-form-item label="是否隔离" prop="geli">
    <el-radio-group v-model="form.geli">
    <el-radio :value="0">是</el-radio>
    <el-radio :value="1">否</el-radio>
    </el-radio-group>
</el-form-item>

EP >= 2.6.0 时 <el-radio> 使用 value，低于该版本使用 label，否则不生效，label 预计在 3.0 版本移除。

Element UI/Element Plus

列表序号排序

列表页面我们经常需要让序号从 1 开始增加，如果项目的前期直接显示 id 也是可以的，但是显示 id 的话如果发生了删除操作，则序号显示会断层，变的不连续。Element UI 提供了很方便的排序序号，如下，只要设置 type="index" 即可：

1	<el-table-column label="序号" type="index" width="50" align="center"/>

如果你使用了上面的写法，并且查看第一页效果的时候，你会发现，哎呀，这就是我想要的！但是你进入第二页看看呢？可能有的同学就不乐意了，领导给我的需求是第二页可以顺延第一页的序号啊。别急，那么按下面的方式写即可，不过参数的名称需要自己修改：

<el-table-column label="序号" type="index" width="50" align="center">
    <template slot-scope="scope">
        {{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}
    </template>
</el-table-column>

<el-table-column label="序号" type="index" width="50" align="center">
    <template #default="scope">
        {{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}
    </template>
</el-table-column>

列表某一行数据置顶

Vue + Element UI

<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
    <template slot-scope="scope">
        <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handlePin(scope.row, scope.$index)"
            v-hasPermi="['marketing:usercount:edit']"
        >置顶
        </el-button>
    </template>
</el-table-column>

<script>
data() {
    return {
        tableList: []
    }
}

methods:{
    handlePin(row, index) {
        if (this.tableList.length >= 2) {
        const firstRow = this.tableList.shift(); // 移除第一行并保存
        this.tableList.unshift(row); // 将选中行插入到第一个位置
        this.tableList.splice(index, 1, firstRow); // 将原来的第一行插入到选中行的位置
        }
    },
}
</script>

显示富文本

使用 Element UI 时，可以在添加的时候使用 <editor> 富文本，如果使用了样式，在显示的时候是展示 HTML 标签的，可以采用以下方式处理（使用 v-html 而非正则处理）：

<el-table-column label="富文本内容" align="center" prop="content" >
    <template slot-scope="scope">
        <div v-html="scope.row.content"></div>
    </template>
</el-table-column>

这样在展示富文本内容时不会显示 HTML 的样式标签。但是具有被 XSS 攻击的风险，所以只能在确保安全的时候使用。