elementui 表格序号el-table自定义序号事件

关键代码就是：

 

 

 <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%">
        <el-table-column
            type="index"
            align="center"
            :index="indexMethod"
            label="序号"
            width="70"
        >
        </el-table-column>
        <el-table-column
            fixed
            prop="date"
            label="日期"
            width="150">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="120">
        </el-table-column>
        <el-table-column
            prop="province"
            label="省份"
            width="120">
        </el-table-column>
        <el-table-column
            prop="city"
            label="市区"
            width="120">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址"
            width="300">
        </el-table-column>
        <el-table-column
            prop="zip"
            label="邮编"
            width="120">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

 

data() {
    return {
      current: 1, // 当前页
      size: 10, // 每页条数
      total: 0, // 总条数
      loading: true, // Loading 加载
  tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }],
    }
  },

methods: {
    /**
     * 自定义序号事件
     * @param val {Number} 表格中的序号，从0开始
     **/
    indexMethod(index) {
      return (this.current - 1) * this.size + index + 1
    },
}

参考elementui 的序号：

 <el-table-column
      type="index"
      width="50">
    </el-table-column>

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/table