vue+element 动态渲染表格

表格展示

表格动态渲染

          <el-table :data="studentList">
            <!-- 循环列表内容 -->
            <el-table-column  :label= "item.label" :prop= "item.prop" v-for="(item, index) in columns" :key="index" :align="item.align" >
            </el-table-column>
            <!-- 操作可以是一个固定的列 -->
             <el-table-column label="操作" prop="action" align="center">
              <template  slot-scope="scope">
                <el-button @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button >删除</el-button>
              </template>
            </el-table-column>
          </el-table>

1、el-table元素中注入data对象数组studentList，el-table-column中用prop属性来对应对象中的“键名”即可填入键值，用label属性来定义表格的列名。可以使用width属性来定义列宽。具体示例查看elementUI table组件示例代码地址：https://element.eleme.cn/#/zh-CN/component/table

2、使用 :label、:prop 等属性加冒号是v-bind:label的缩写，绑定一个属性值是动态变化的，不加冒号是常量固定值

3、使用  v-for 遍历元素，循环渲染元素或模板块，必须使用特定语法 alias in expression

4、v-for="(item, index) in columns"  columns数组，item当前遍历的元素别名，index索引 ，item.label,获取item数据中的label属性

5、通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据  scope.index,获取当前行索引，scope.row,获取当前行对象

模拟的数据

结合上面的模板代码查看

1、:data 的数据源是studentList

2、columns  列表属性数据

3、methods 查看获取学生列表数据具体来自于mockjs的数据，地址https://www.cnblogs.com/liho/p/15831469.html

<script>

export default {
  name: 'Test',
  data () {
    return {
      studentList: [],
      columns: [{
        label: '姓名',
        prop: 'name',
        align: 'center'
      },
      {
        label: '年龄',
        prop: 'age',
        align: 'center'
      },
      {
        label: '地址',
        prop: 'address',
        align: 'center'
      }
      ]
    }
  },
  mounted: function () {
    this.getStudent()
    console.log(this.columns)
  },
  methods: {
    // 获取学生列表
    getStudent () {
      this.$axios.get('/api/studentList').then(result => {
        console.log(result.data)
        this.studentList = result.data
      })
    },
    handleEdit (index, row) {
      // JSON.stringify 将对象转换成字符串
      alert(JSON.stringify(row))
    }
  }
}
</script>

 

以上动态渲染表格成功