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>

效果