u-table-column使用例子
时间: 2023-11-08 13:05:08 浏览: 64
在Vue.js的表格组件 u-table 中,可以使用 u-table-column 来定义表格的列。一个使用 u-table-column 的例子如下:
```
<template>
<div>
<u-table :data="tableData">
<u-table-column label="姓名" prop="name"></u-table-column>
<u-table-column label="年龄" prop="age"></u-table-column>
<u-table-column label="地址" prop="address"></u-table-column>
</u-table>
</div>
</template>
<script>
export default {
data () {
return {
tableData: [
{ name: '张三', age: 18, address: '北京市海淀区' },
{ name: '李四', age: 20, address: '上海市浦东新区' },
{ name: '王五', age: 22, address: '成都市高新区' }
]
}
}
}
</script>
```
以上代码中,我们定义了一个 u-table 组件,通过 u-table-column 来定义表格的列,其中 label 属性定义表格列的名称,prop 属性定义表格列对应数据的字段名。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)