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

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

发布于
2021-08-03

更新于
2021-08-03

✓ 已被采纳

<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};`
}

效果图：

周皱

1838

发布于
2021-08-02

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

xiaofei

8451214

发布于
2021-08-03

更新于
2021-08-03

<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>

IT小马

1.2k21549

发布于
2021-08-03

更新于
2021-08-03

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

①    &#9312;    ⑪    &#9322;    
②    &#9313;    ⑫    &#9323;    
③    &#9314;    ⑬    &#9324;    
④    &#9315;    ⑭    &#9325;    
⑤    &#9316;    ⑮    &#9326;    
⑥    &#9317;    ⑯    &#9327;    
⑦    &#9318;    ⑰    &#9328;    
⑧    &#9319;    ⑱    &#9329;    
⑨    &#9320;    ⑲    &#9330;    
⑩    &#9321;    ⑳    &#9331;

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

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

vue2.6，打包后app.js，8M,chunk.js，6M，加载打开页面很慢，有什么办法减少，打开页面快一些？

Element Plus表格组件如何呈现复杂布局如图？