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

EP：Element Plus

若依

form 表单图片上传

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

预览时：

1
2
3
4
5
6
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 表单列表 -->
<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>

单选框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!-- 表单列表 -->
<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"/>

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

vue2
vue3
1
2
3
4
5
<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>
1
2
3
4
5
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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 而非正则处理）：

1
2
3
4
5
<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 攻击的风险，所以只能在确保安全的时候使用。

表格信息日期格式化

1
2
3
4
5
<el-table-column label="开始时间" align="center" prop="startTime">
    <template #default="scope">
        <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
    </template>
</el-table-column>

EP el-date-piker 日期范围回显

若依框架吼。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<!-- 显示是分开的 -->
<el-table-column label="开始时间" align="center" prop="starTime">
    <template #default="scope">
        <span>{{ parseTime(scope.row.businessLicenseStart, '{y}-{m}-{d}') }}</span>
    </template>
</el-table-column>
<el-table-column label="结束时间" align="center" prop="endTime">
    <template #default="scope">
        <span>{{ parseTime(scope.row.businessLicenseEnd, '{y}-{m}-{d}') }}</span>
    </template>
</el-table-column>

<!-- 添加和修改对话框 -->
<el-form-item label="时间范围" prop="rangeTime">
    <el-date-picker
        v-model="rangeRangeArray"
        type="daterange"
        @change="handleRangeTime"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DDT00:00:00"
    />
</el-form-item>


<script setup>

const data = reactive({
  form: {},
  ...
})


// 回显时间
const rangeRangeArray = computed({
  get() {
    return [form.value.startTime, form.value.endTime]
  },
  set(val) {
    if (val) {
      form.value.starTime = val[0]
      form.value.endTime = val[1]
    }
  }
})

// 添加或修改为表单赋值
const handleRangeTime = (value) => {
  form.startTime = value[0]
  form.endTime = value[1]
}
</script>

value-format 是最终传递给后端的日期格式，format 只是前端页面显示的格式；

其中，parseTime 来自若依，源码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
export function parseTime(time, pattern) {
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
      time = parseInt(time)
    } else if (typeof time === 'string') {
      time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
    }
    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
    let value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return time_str
}

固定操作列

使用 EP 的 fixed="right" 属性。

1
2
3
4
5
6
7
8
9
10
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
    <template #default="scope">
        <el-tooltip trigger="hover" content="修改" placement="top">
        <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['biz:company:edit']"></el-button>
        </el-tooltip>
        <el-tooltip trigger="hover" content="删除" placement="top">
        <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['biz:company:remove']"></el-button>
        </el-tooltip>
    </template>
</el-table-column>

留下来过的印记~

本站由 江湖浪子 使用 Stellar 1.29.1 主题创建。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。