Use element-ui to render collection data and add index columns

1. Use element-ui to render collection data

Now that my userlist collection contains information about each user, it is surprisingly easy to render using element-ui.
Code:

<el-table :data="userlist" border stripe>
            <el-table-column label="姓名" prop="username"></el-table-column>
            <el-table-column label="邮箱" prop="email"></el-table-column>
            <el-table-column label="电话" prop="mobile"></el-table-column>
            <el-table-column label="角色" prop="role_name"></el-table-column>
            <el-table-column label="状态" prop="status"></el-table-column>
            <el-table-column label="操作" ></el-table-column>
</el-table>

labelWhen writing the field name, propjust write the value in userlist. The most convenient thing is that I no longer need to loop. Writing this label and attribute value can help me loop.

Border function:

Stripe function:

2. Adding index columns

Just the following line of code can complete the addition of index columns.

<el-table-column type=index></el-table-column>