vue 动态渲染表格序号列

当前demo用的是 Vue + Ant Design Vue 框架的，如果用的是Element-UI 应该也是差不多的原理。

总结三种方法：

第一种：动态在表格数据添加一个index 序号字段
template：

   <template><div class="table-list"><a-table :columns="columns" :data-source="tableData" :locale='{emptyText:"暂无数据"}' :pagination="false":scroll="{ x: 1300 }"></a-table></div></template>

script：

 export default {data() {return {columns: [{title: '序号',dataIndex: 'index',key: 'index',},{title: '商品名称',dataIndex: 'skuName',key: 'skuName',ellipsis: true,}],tableData: [],},mounted(){this.getList()},methods:{// 获取表格数据async getList(){let res = await getBaseGoodsList(); //调接口获取列表数据let list = res.data.result.listlet index = 1list.map(item => {       //循环添加index item.index =  index++})this.tableData = list   //赋值给 tableData}}}

第二种：使用table插槽的进行序号的动态写入

template：

   <template><div class="table-list"><a-table :columns="columns" :data-source="tableData" :locale='{emptyText:"暂无数据"}' :pagination="false":scroll="{ x: 1300 }">// 序号通过插槽的index来写入序号，text当前值，record当前行，index索引<span slot="index" slot-scope="text, record, index">{{++index}}</span>//操作也是同理<span slot="action" slot-scope="text, record"><a-button type="link" @click="goEditPage(record)">编辑</a-button></span></a-table></div></template>

script：

 export default {data() {return {columns: [{title: '序号',dataIndex: 'index',key: 'index',scopedSlots: { customRender: 'index' },},{title: '商品名称',dataIndex: 'skuName',key: 'skuName',ellipsis: true,},{title: '操作',key: 'action',fixed: 'right',width: 100,scopedSlots: { customRender: 'action' },}],tableData: [],},mounted(){this.getList()},methods:{// 获取表格数据async getList(){let res = await getBaseGoodsList(); //调接口获取列表数据console.log('列表数据',res.data.result.list)let list = res.data.result.listthis.tableData = list   //赋值给 tableData}}}

第三种：使用Ant Design Vue table API 的customRender 函数，也是代码最少的写法，依赖Ant Design Vue

template：

   <template><div class="table-list"><a-table :columns="columns" :data-source="tableData" :locale='{emptyText:"暂无数据"}' :pagination="false":scroll="{ x: 1300 }"></a-table></div></template>

script：

 export default {data() {return {columns: [{title:'序号', // text当前值，record当前行，index索引customRender: (text, record, index) => `${index + 1}`},{title: '商品名称',dataIndex: 'skuName',key: 'skuName',ellipsis: true,}],tableData: [],},mounted(){this.getList()},methods:{// 获取表格数据async getList(){let res = await getBaseGoodsList(); //调接口获取列表数据console.log('列表数据',res.data.result.list)let list = res.data.result.listthis.tableData = list   //赋值给 tableData}}}

vue 动态渲染表格序号列相关推荐

vue动态渲染表格，显示上万条数据
<template><div class="table-box"><div class="tabletbo ...
el-table动态渲染表格列el-table-column且里边嵌套el-popover弹出框语法
总结下表格中每列的动态渲染实现语法:vue + element <el-table><template v-if="columns.length > 0"& ...
VUE动态展示表格字段
前言最近叼毛产品让写个需求,动态展示表格字段,要求动态根据用户习惯保存,下次进页面展示以前的,还能再次选择. 思考让用户选择展示那些字段保存db 进页面先查询db 然后根据table 字段属性过 ...
vue动态计算表格列两个时间的差值
方法中用到了插件moment.js,使用day.js也是一样的.这两个时间工具超好用,不知道的快去了解一下,从此不需要new Date(). moment官网地址:http://momentjs.cn ...
vue+elementUI 显示表格指定列合计数据
明确需求下图来自elementUI官网根据合计行数据的来源可以分为两种情况: 接口返回的数据只有表格中对应每个ID的数据,最后一行的合计是由前端来计算的表格中的合计行数据是从接口中返回的,不是由 ...
Vue动态渲染echarts图表
最近做项目遇到这样一个场景,有一个标签选择界面,选择不同的标签需要展示不同的图表有可能折线图,有可能柱状图,也可能饼图,图表的类型由后端返回,标签可以多选.这个时候就需要动态来渲染不定数量和类型的ec ...
vue elmenetui admin表格筛选列（动态显示）
转载自:https://blog.csdn.net/weixin_44835598/article/details/116056565 <template><div class=&q ...
给动态生成的id标签添加html,vue动态渲染svg、添加点击事件
欢迎关注[前端小讴的github],原创技术文章业务需求(vue项目中) 1.页面展示svg内容 2.监听svg内部的点击事件 3.动态改变svg内部元素的属性和值 html标签经多次实验,用em ...
vue 动态渲染图片不出来
图片渲染不出来是路径问题, 当把路径放在assets里面是,它是相对路径,是经过webpack处理,引入的时候是通过./或者是../引用,如果有上千张图片渲染 <div v-for=" ...
【ant design vue】生成表格序号
1.作用域插槽 columns:[{title: '编号',scopedSlots: { customRender: 'indexRender' },align:'center'}], 2.表格中 & ...

vue 动态渲染表格序号列

总结三种方法：

vue 动态渲染表格序号列相关推荐

最新文章

热门文章