当前位置： 文江博客话题详情

求助，elementUI怎么把表格的序号列改圆圈序号

发布于 2022-09-13 00:52:34 字数 84 浏览 19 评论 0

使用type="index"显示的是自增数字，
需要如下效果

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（4）

摇划花蜜的午后 2022-09-20 00:52:34
<el-table-column
      type="index"
      width="50">
      <template slot-scope="scope">
        <span v-html="getIndex(scope.$index)"></span>
    </template>
</el-table-column>
getIndex(e) {
  return `&#${9312 + e};`
}

效果图：
image.png

回复
对你的占有欲 2022-09-20 00:52:34

使用type="index"后还可以配置一个参数，index可以是数字和一个方法，数字设设置从设置的数字为起始值。方法有一个参数当前序列号(从0开始)返回想要的内容

回复
晨曦慕雪 2022-09-20 00:52:34
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <script src="https://unpkg.com/vue@next"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css" />
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
    <title>Element Plus demo</title>
  </head>
  <body>
    <div id="app">
      <el-table
        ref="singleTable"
        :data="tableData"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column type="index" width="100" label="#">
          <template #default="scope">
            <span v-html="tableIndex(scope.$index) "> </span>
          </template>
        </el-table-column>
        <el-table-column property="date" label="日期" width="120"> </el-table-column>
        <el-table-column property="name" label="姓名" width="120"> </el-table-column>
        <el-table-column property="address" label="地址"> </el-table-column>
      </el-table>
    </div>
    <script>
      const App = {
        data() {
          return {
            tableData: [
              {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              },
              {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              },
              {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              },
              {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              },
              {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
              },
              {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
              },
              {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              },
              {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
              }
            ]
          }
        },
        methods: {
          tableIndex(e) {
            return `&#${9312 + e};`
          }
        }
      }
      const app = Vue.createApp(App)
      app.use(ElementPlus)
      app.mount('#app')
    </script>
  </body>
</html>

回复
幸福不弃 2022-09-20 00:52:34

html中写带圈的数字
表示数値文字参照表示数値文字参照

①    ①    ⑪    ⑪    
②    ②    ⑫    ⑫    
③    ③    ⑬    ⑬    
④    ④    ⑭    ⑭    
⑤    ⑤    ⑮    ⑮    
⑥    ⑥    ⑯    ⑯    
⑦    ⑦    ⑰    ⑰    
⑧    ⑧    ⑱    ⑱    
⑨    ⑨    ⑲    ⑲    
⑩    ⑩    ⑳    ⑳
回复
~没有更多了~

关于作者

未央

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

饮湿

文章 0 评论 0

明月

文章 0 评论 0

02

文章 0 评论 0

hs1283

文章 0 评论 0

风向决定发型

文章 0 评论 0

落花浅忆

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文