[JavaScript知识库]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