0.0.17 • Published 3 years ago
j-form-table v0.0.17
form-table 表单式表格
表单式表格,使用时只需要传需要展示的标题和数据.
基于 element-ui 2.x
安装
npm i j-form-table
在 vue 应用的入口文件中使用:
import FormTable from 'form-table'
Vue.use(FormTable)
// 可全局配置 title 的宽度 默认是 120 单位 px
Vue.use(FormTable, { titleWidth: 150 })
常用 props
prop | 说明 | 类型 | 是否必需 | 默认值 | 其他 |
---|---|---|---|---|---|
titleList | 组件配置 | []{title:'',prop:''} | 是 |
| |
data | 从该属性中取值来展示 | Object | 否 | {} | |
title | 整个组件的标题 | String | 否 | '' | |
titleWidth | 标题宽度 | Number | 否 | 120 | 单位为px |
titleNumPreRow | 一行有几个title 、prop 对 | Number | 否 | 3 | 只能是1,2,3,4,5,6 |
基本用法
配置 titleList
和 data
即可展示数据;
<template>
<div>
<FormTable title="使用例子" :data="data" :titleList="titleList" />
<FormTable
title="使用例子"
:data="data"
:titleList="titleList"
:titleWidth="150"
/>
</div>
</template>
<script>
const img =
'https://tva1.sinaimg.cn/large/008i3skNgy1gu9gco1hdbj605k05kgll02.jpg'
export default {
name: 'App',
data() {
return {
data: {
name: 'LiHei',
image: img,
job: 'web dev',
slary: '3000',
address: '四川省成都市成华区十里店寺庙',
education: '本科',
isGood: 1
},
titleList: [
{ title: '姓名', prop: 'name' },
{
title: '头像',
// 自定义 title 属性值
titleTips: data => {
return (data.image && '生成图,点击放大') || '暂无头像'
},
prop: (h, data) => {
return (
<div style={{ width: '50px', height: '200px' }}>
<img src={data.image} alt='我的头像:超级无敌美丽' />
</div>
)
}
},
{
title: '职业',
prop: 'job'
},
{
title: '月薪',
prop: (h, data) => {
return <span>{data.slary + '$'}</span>
},
enableCopy: true // 开启点击赋值内容
},
{
title: '住址',
prop: 'address',
enableCopy: true,
span: 2
},
{
title: '学历',
prop: 'education',
span: 1
},
{
title: '是否统招',
prop: (h, data) => {
const map = { 0: '否', 1: '是' }
return <span>{map[data.isGood]}</span>
},
span: 2
}
]
}
}
}
</script>
效果