json如何加入参数

在Vue中，Table是一种不可或缺的组件，可以展示多行数据，同时可以自定义表格的样式和功能。Vue提供了一些内置的table组件，如el-table组件，还可以通过手动编写组件来实现。下面我们将详细介绍Vue中的table组件，包括样式、数据传递、表格功能等。

1. 样式设置

{
  tableStyle: {
    width: '100%',backgroundColor: '#fff',borderCollapse: 'collapse',marginBottom: '16px','& th,& td': {
      padding: '16px',border: '1px solid #ccc'
    }
  }
}

在上面的代码中，我们设置了表格的宽度、背景色、边框合并、底部边距等。在& th,& td中，我们设置了单元格的内边距和边框颜色。通过这样的样式设置，我们可以实现自己想要的表格样式。

2. 数据传递

<el-table :data="tableData">
  <el-table-column
    prop="name"
    label="姓名"
  ></el-table-column>
  <el-table-column
    prop="age"
    label="年龄"
  ></el-table-column>
</el-table>

在上面的代码中，我们使用了el-table组件和el-table-column组件来展示表格数据。其中，通过:data属性来传递数据，而且el-table-column的prop属性指定了要展示的数据项，例如姓名和年龄。这样，我们就可以很方便地将数据传递给表格，展示出来。

3. 表格功能

<el-table :data="tableData">
  <el-table-column
    prop="name"
    label="姓名"
    sortable
  ></el-table-column>
  <el-table-column
    prop="age"
    label="年龄"
  ></el-table-column>
  <el-table-column>
    <template slot-scope="scope">
      <el-button type="primary">修改</el-button>
    </template>
  </el-table-column>
</el-table>

el-table组件提供了一些常用的表格功能，例如表格排序、分页、勾选等。在上面的代码中，我们给姓名列添加了sortable属性，即可实现排序功能。此外，我们还可以通过template标签来自定义表格列的内容，例如在最后一列中添加了一个修改按钮。

总的来说，Vue中的table组件是非常强大和灵活的，可以满足各种表格展示需求。我们在使用时，只要结合自己的实际情况进行定制化开发，就能打造出漂亮、实用的表格。