VUE+elementUI横向表格

作者：System 时间：2024年09月06日分类：所有,elementui 字数：1209

这篇文章距离上次修改已过211天，其中的内容可能已经有所变动。

在Vue中使用Element UI创建横向表格，你可以使用<el-table>组件，并通过设置el-table-column的prop属性来指定数据源的字段。下面是一个简单的例子：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :default-sort="{prop: 'date', order: 'descending'}"
  >
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180"
    ></el-table-column>
    <el-table-column
      prop="address"
      label="地址"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '赵小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '孙小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>

在这个例子中，<el-table>组件接收data属性，该属性绑定到一个包含对象的数组，每个对象代表表格中的一行数据。<el-table-column>组件的prop属性指定了数据源的字段名。通过调整width属性，你可以控制列宽度，从而使表格横向。

VUE+elementUI横向表格

评论已关闭

推荐阅读