055_Descriptions描述列表

自由与束缚JavaJavaScript

已于 2022-03-05 23:51:48 修改

阅读量7.4k

点赞数

分类专栏： element-ui

于 2022-03-05 23:51:35 首次发布

本文链接：https://blog.csdn.net/aihiao/article/details/123302764

版权

Element UI Descriptions组件前端展示尺寸调整自定义样式

关键词由CSDN通过智能技术生成

element-ui 专栏收录该内容

57 篇文章

订阅专栏

1. Descriptions描述列表

1.1. 列表形式展示多个字段。

1.2. Descriptions Attributes

参数	说明	类型	可选值	默认值
border	是否带有边框	boolean	无	false
column	一行Descriptions Item的数量	number	无	3
direction	排列的方向	string	vertical / horizontal	horizontal
size	列表的尺寸	string	medium / small / mini	无
title	标题文本, 显示在左上方	string	无	无
extra	操作区文本, 显示在右上方	string	无	无
colon	是否显示冒号	boolean	无	true
labelClassName	自定义标签类名	string	无	无
contentClassName	自定义内容类名	string	无	无
labelStyle	自定义标签样式	object	无	无
contentStyle	自定义内容样式	object	无	无

1.3. Descriptions Slots

name	说明
title	自定义标题, 显示在左上方
extra	自定义操作区, 显示在右上方

1.4. Descriptions Item Attributes

参数	说明	类型	可选值	默认值
label	标签文本	string	无	无
span	列的数量	number	无	1
labelClassName	自定义标签类名	string	无	无
contentClassName	自定义内容类名	string	无	无
labelStyle	自定义标签样式	object	无	无
contentStyle	自定义内容样式	object	无	无

1.5. Descriptions Item Slots

name	说明
label	自定义标签文本

2. Descriptions描述列表例子

2.1. 使用脚手架新建一个名为element-ui-descriptions折叠面板的前端项目, 同时安装Element插件。

2.2. 编辑index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Descriptions from '../components/Descriptions.vue'
import SizeDescriptions from '../components/SizeDescriptions.vue'
import VerticalDescriptions from '../components/VerticalDescriptions.vue'
import MyselfDescriptions from '../components/MyselfDescriptions.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Descriptions' },
  { path: '/Descriptions', component: Descriptions },
  { path: '/SizeDescriptions', component: SizeDescriptions },
  { path: '/VerticalDescriptions', component: VerticalDescriptions },
  { path: '/MyselfDescriptions', component: MyselfDescriptions }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建Descriptions.vue

<template>
  <div>
    <h1>基础用法</h1>
    <el-descriptions title="用户信息">
      <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
      <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
      <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
      <el-descriptions-item label="备注"><el-tag size="small">学校</el-tag></el-descriptions-item>
      <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

2.4. 在components下创建SizeDescriptions.vue

<template>
  <div>
    <h1>不同尺寸</h1>
    <el-radio-group v-model="size">
      <el-radio label="">默认</el-radio>
      <el-radio label="medium">中等</el-radio>
      <el-radio label="small">小型</el-radio>
      <el-radio label="mini">超小</el-radio>
    </el-radio-group>

    <el-descriptions title="带边框列表" :column="3" :size="size" border>
      <template slot="extra"><el-button type="primary" size="small">操作</el-button></template>
      <el-descriptions-item><template slot="label"><i class="el-icon-user"></i>用户名</template>kooriookami</el-descriptions-item>
      <el-descriptions-item><template slot="label"><i class="el-icon-mobile-phone"></i>手机号</template>18100000000</el-descriptions-item>
      <el-descriptions-item><template slot="label"><i class="el-icon-location-outline"></i>居住地</template>苏州市</el-descriptions-item>
      <el-descriptions-item><template slot="label"><i class="el-icon-tickets"></i>备注</template><el-tag size="small">学校</el-tag></el-descriptions-item>
      <el-descriptions-item><template slot="label"><i class="el-icon-office-building"></i>联系地址</template>江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="无边框列表" :column="3" :size="size">
      <template slot="extra"><el-button type="primary" size="small">操作</el-button></template>
      <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
      <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
      <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
      <el-descriptions-item label="备注"><el-tag size="small">学校</el-tag></el-descriptions-item>
      <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  data () {
    return {
      size: ''
    }
  }
}
</script>

2.5. 在components下创建VerticalDescriptions.vue

<template>
  <div>
    <h1>垂直列表</h1>
    <el-descriptions title="垂直带边框列表" direction="vertical" :column="4" border>
      <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
      <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
      <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
      <el-descriptions-item label="备注"><el-tag size="small">学校</el-tag></el-descriptions-item>
      <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
      <el-descriptions-item label="性别">男</el-descriptions-item>
      <el-descriptions-item label="年龄">21</el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="垂直无边框列表" :column="4" direction="vertical">
      <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
      <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
      <el-descriptions-item label="居住地" :span="2">苏州市</el-descriptions-item>
      <el-descriptions-item label="备注"><el-tag size="small">学校</el-tag></el-descriptions-item>
      <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
      <el-descriptions-item label="性别">男</el-descriptions-item>
      <el-descriptions-item label="年龄">21</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

2.6. 在components下创建MyselfDescriptions.vue

<template>
  <div>
    <el-descriptions title="自定义样式列表" :column="3" border>
      <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
      <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
      <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
      <el-descriptions-item label="备注"><el-tag size="small">学校</el-tag></el-descriptions-item>
      <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<style scoped>
  /deep/.my-label {
    background: #E1F3D8 !important;
  }
  /deep/.my-content {
    background: #FDE2E2;
  }
</style>

2.7. 运行项目, 访问http://localhost:8080/#/Descriptions