用 A-Z 表示 el-table 表格序号，一个你可能忽略的方法

最新推荐文章于 2023-09-28 15:17:14 发布

领秀5858

最新推荐文章于 2023-09-28 15:17:14 发布

阅读量195

点赞数

分类专栏： javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_44019370/article/details/125031640

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

业务场景：基于element UI 15.6版本,el-table 表格的序号我想用 A-Z 该怎么表示呢

需求分析：这里可以用的方法 `String.fromCharCode()`, 看看 MDN 怎么解释的！

功能实现：在线远行

在 UTF-16 中，绝大部分常用的字符可以用一个 16 位的值表示（即一个代码单元）。然而，有一类字符叫 Base Multilingual Plane (BMP)，是所有可寻址的 Unicode 码点的 1/17th。剩下的码点，从范围 \65536 \ (\0x010000) 到 \1114111(\0x10FFFF) 被称之为补充字符。在 UTF-16 中，补充字符也叫代理（surrogates），用两个 16 位代码单元表示，它是有目的被保留下来的。两个代理（surrogates）形成一个有效组合，也叫代理对，可以用来表示一个补充字符。

因为 \fromCharCode()\ 只作用于 16 位的值 (跟 \\u\转义序列一样)，为了返回一个补充字符，一个代理对是必须的。例如，\String.fromCharCode(0xD83C, 0xDF03)\和 \\uD83C\uDF03\ 返回码点 \U+1F303\ “Night with Stars”。

示例：

String.fromCharCode(65, 66, 67);   // 返回 "ABC"
String.fromCharCode(0x2014);       // 返回 "—"
String.fromCharCode(0x12014);      // 也是返回 "—"; 数字 1 被剔除并忽略
String.fromCharCode(8212);         // 也是返回 "—"; 8212 是 0x2014 的十进制表示

String.fromCharCode(0xD83C, 0xDF03); // Code Point U+1F303 "Night with
String.fromCharCode(55356, 57091);   // Stars" == "\uD83C\uDF03"
String.fromCharCode(0xD834, 0xDF06, 0x61, 0xD834, 0xDF07); // "\uD834\uDF06a\uD834\uDF07"

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>A-Z 表示 el-table 表格序号</title>
    <script src="https://unpkg.com/vue@2"></script>
    <script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
  </head>
  <body>
    <div id="app">
      <el-table :data="listArr" style="width: 100%;" border height="393">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
      </el-table>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          listArr: [
            { id: 1, name: "周一", age: 11 },
            { id: 2, name: "虎二", age: 12 },
            { id: 3, name: "张三", age: 13 },
            { id: 4, name: "李四", age: 14 },
            { id: 5, name: "王五", age: 15 },
            { id: 6, name: "赵六", age: 16 }
          ]
        },
        created() {
          this.listArr.forEach((item, index) => {
            // 返回由指定的 UTF-16 代码单元序列创建的字符串作为 ID
            item.id = String.fromCharCode(65 + index);
          });
          console.log(this.listArr);
        }
      });
    </script>
  </body>
</html>

领秀5858

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用 A-Z 表示 el-table 表格序号，一个你可能忽略的方法

业务场景：基于element UI 15.6版本,el-table 表格的序号我想用 A-Z 该怎么表示呢需求分析：这里可以用的方法 `String.fromCharCode()`, 看看 MDN 怎么解释的！功能实现：在线远行在 UTF-16 中，绝大部分常用的字符可以用一个 16 位的值表示（即一个代码单元）。然而，有一类字符叫 Base Multilingual Plane (BMP)，是所有可寻址的 Unicode 码点的 1/17th。剩下的码点，从范围 `65536` (`0x010000`)
复制链接

扫一扫