# SuDetailList用于（横向/纵向）排列布局

## 导入使用
```code[javascript]
import SuDetailList from "ss-universal-client-web/comp/widget/su-detail-list";
```
### 竖向排列
:::demo

```html
<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <h3>竖向排列</h3>
            </div>
            <su-detail-list title="title" :col="1">
                <su-detail-list-item :term="item.name"  :termspan="3" v-for="(item,index) in columns" :key="index">
                    <span>{{item.info}}</span>
                    <el-button v-if="index==0" style="float: right">我是右侧</el-button>
                </su-detail-list-item>
            </su-detail-list>
        </el-card>
    </div>
</template>

<script>
  export default {
    components: {
        SuDetailList,
        SuDetailListItem:seDetailList.item
    },
    data () {
		return {
			columns: [
			    {name: '用户名', info: '我是用户名'},
			    {name: '密码', info: '我是密码'},
			    {name: '描述', info: '我是描述描述描述描述描述描述描述描述描述描述描/n述描述描述描述描述描述描述描述描述描述描述'}
			]
		}
	},
	methods: {}
  }
</script>
```
:::
### 横向排列
:::demo

```html
<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <h3>横向排列</h3>
            </div>
            <su-detail-list title="title" :col="3">
                <su-detail-list-item :term="item.name" v-for="(item,index) in columns" :key="index">
                    <span>{{item.info}}</span>
                </su-detail-list-item>
            </su-detail-list>
        </el-card>
    </div>
</template>

<script>
  export default {
    components: {
        SuDetailList,
        SuDetailListItem:seDetailList.item
    },
    data () {
		return {
			columns: [
			    {name: '用户名', info: '我是用户名'},
			    {name: '密码', info: '我是密码'},
			    {name: '描述', info: '我是描述描述描述描述描述描述描述描述描述描述描/n述描述描述描述描述描述描述描述描述描述描述'}
			]
		}
	},
	methods: {}
  }
</script>
```
:::

###  Attributes

| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| title      |  标题           | string | — | — |
| col      |  几列显示           | number | — | — |
| term      |左侧名称             | object | — | — |
| termspan      |  栅格占据的列数           | number | — |
| key      |  唯一索引           | — | — |