elementui表格动态for循环并对应列添加链接

<el-table
    :data="Date"     <!-- 表格里面的数据源 -->
      border
      stripe
>
<el-table-column type="selection" width="55" v-if="iCheckbox" ></el-table-column>
                    <el-table-column label="序号" type="index" v-if="iRownumber" width="55"></el-table-column>
                    <!-- 设置表头数据源,并循环渲染出来,property对应列内容的字段名,详情见下面的数据源格式 -->
                    <el-table-column
                        v-for ="item in headerjson"
                        :prop = "item.dataIndex"
                        :label = "item.text"
                        :key = "item.dataIndex"
                        v-if= "!item.hidden"   
                        :property="item.dataIndex"
                        >
                         <!-- 数据的遍历  scope.row就代表数据的每一个对象-->
                         <template slot-scope="scope">
                         <!-- 判断表头数据源中是否有url属性,如果有添加链接,没有的话则不添加链接-->
                     <div  v-if="!!item.url">
                       <a :href="item.url" target="_blank">{{scope.row[scope.column.property]}}</a>
                       </div>
                       <div v-else>
                       <span>{{scope.row[scope.column.property]}}</span>
                     </div>
                     </template>
                    </el-table-column>
                    </el-table>

模拟数据源展示:
1.表头数据

  headerjson: [{
                    dataIndex: 'date', text: '日期', hidden: false, type: "String",
                    url:'http://localhost:8080/test.html'

                },
                    {dataIndex: 'name', text: '姓名 ', hidden: false, type: "int"},
                    {dataIndex: 'address', text: '地址', hidden: false, type: "String"},
                ],

2.表格数据

data: [{  //表格数据
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-08',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],

参考链接:
https://www.cnblogs.com/layaling/p/10962858.html

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值