wl-element

TIP

表格是开发后台管理系统中非常常用的组件,elementUI的el-table组件功能强大,但在实际使用中,我们直接使用会写很多重复代码,本组件通过封装el-table组件,使得写表格配置化,大量减少重复代码,扩展性强,而且不影响el-table的任何属性的使用,事件和属性均可直接继承使用.主要特点如下:

  • 优化了一些el-table默认属性,如border,stripe,highlight-current-row,show-overflow-tooltip均改为默认为true
  • 使用columns属性替代重复的el-table-columns
  • 默认添加单元格双击复制
  • 内置一些常用的格式化函数
  • 单元格没有内容默认展示- 短横杠

# 基础表格

基础的表格展示用法。

wl-table基于el-table,data属性保持不变, 新增columns属性以替换重复的el-table-column,columns的每一项属性有两个必要值label和prop与el-table-column的label和value保持一致.而el-table-column的所有属性均可有columns的每一项中的attrs属性继承,如上例中attrs中的width属性。

<template>
  <wl-table
    :data="tableData"
    :columns="columns"
  >
  </wl-table>
</template>
<script>
export default {
  name: 'table-demo-01',
  data () {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
        { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
        { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }
      ]
    }
  },
  computed: {
    columns () {
      return [
        { label: '日期', prop: 'date', attrs: { width: 180 } },
        { label: '姓名', prop: 'name', attrs: { width: 180 } },
        { label: '地址', prop: 'address' }
      ]
    }
  }
}
</script>
显示代码

# 自定义列模板

自定义列的显示内容，可组合其他组件使用。

<template>
  <wl-table :data="tableData" :columns="columns">
    <template #date="{row}">
      <i class="el-icon-time"></i>
      <span style="margin-left: 10px">{{row.date}}</span>
    </template>
    <template #name="{row}">
      <el-popover trigger="hover" placement="top">
        <p>姓名: {{ row.name }}</p>
        <p>住址: {{ row.address }}</p>
        <div class="name-wrapper" slot="reference">
          <el-tag size="medium">{{ row.name }}</el-tag>
        </div>
      </el-popover>
    </template>
  </wl-table>
</template>
<script>
export default {
  name: 'table-demo-02',
  data () {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
        { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
        { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
        { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }
      ]
    }
  },
  computed: {
    columns () {
      return [
        { label: '日期', attrs: { width: 180 }, slotName: 'date' },
        { label: '姓名', attrs: { width: 180 }, slotName: 'name' },
        { label: '地址', prop: 'address' }
      ]
    }
  }
}
</script>
显示代码

TIP

如简单的prop不能满足渲染表格,可设置columns该列的slot属性,slot为一个字符串,然后就可以在模板中写相关的自定义内容,写法与el-table的写法类似,本例采用了vue2.6的v-slot插槽语法。

# 格式化内容

wl-table组件内置一些常用的格式化工具,增强了el-table自带的formatter功能,只需给columns该项传递formatter属性即可

TIP

  • formatter属性可以传递一个函数,这时与el-table-column的formatter基本一致,只是返回值多个参数形式变成了对象解构形式
  • 内置了日期格式化,可传递formatter为date返回yyyy-MM-dd,传datetime返回yyyy-MM-dd HH:mm:ss,传time返回HH:mm:ss,另可自定义格式,传递对象如:{type:'data',content:'yyyy年MM月dd日 HH时mm分ss秒'},注意:type必须指定为date, 如下例中出生日期列
  • 可直接传入一个字典对象，如下例中性别列
  • tag标签格式化,如下例中状态列,可根据状态展示对应文案和tag的颜色
  • 单元格没有内容默认展示- 短横杠
<template>
  <wl-table :data="tableData" :columns="columns">
  </wl-table>
</template>

<script>
const sexMap = {
  1: '男',
  0: '女'
}
const jobDict = {
  designer: '设计',
  programmer: '程序员',
  testers: '测试',
  product: '产品'
}
const STATUS_TAG_MAP = {
  working: { text: '正式员工', type: 'success' },
  waiting: { text: '待入职', type: 'primary' },
  leaving: { text: '已离职', type: 'danger' }
}
export default {
  name: 'table-demo-03',
  data () {
    return {
      tableData: [
        { name: '姜超', birth: 770676926920, sex: '1', job: 'testers', status: 'leaving' },
        { name: '尹秀英', birth: 855852076659, sex: 1, job: 'testers', status: 'working' },
        { name: '阎刚', sex: 0, job: 'programmer', status: 'waiting' },
        { name: '崔超', birth: 924288347603, sex: 0, status: 'working' },
        { name: '潘新', birth: 846362675432, sex: 0, job: 'product', status: 'working' }
      ]
    }
  },
  methods: {
    getJob ({ cellValue }) {
      return jobDict[cellValue]
    }
  },
  computed: {
    columns () {
      return [
        { label: '姓名', prop: 'name' },
        { label: '性别', prop: 'sex', dict: sexMap },
        { label: '出生日期', prop: 'birth', formatter: 'date' },
        {
          label: '工作',
          prop: 'job',
          formatter: this.getJob
        },
        {
          label: '状态',
          prop: 'status',
          tagMap: STATUS_TAG_MAP
        }
      ]
    }
  }
}
</script>
显示代码

# 多级表头

<template>
  <wl-table :columns="columns" :data="tableData"></wl-table>
</template>
<script>
export default {
  name:"table-demo-06",
  computed: {
    columns() {
      return [
        {label: '日期', prop: 'date', attrs: {width: 150}},
        {
          label: '配送信息',
          childColumns: [
            {label: '姓名', prop: 'name'},
            {
              label: '地址',
              childColumns: [
                {label: '省份', prop: "province"},
                {label: '市区', prop: "city"},
                {label: '地址', prop: "address"},
                {label: '邮编', prop: "zip"},
              ]
            },
          ]
        }
      ]
    },
    tableData() {
      return [
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }
      ]
    }
  }
}
</script>
显示代码

# 综合演示

<template>
  <wl-table
      :data="tableData"
      :columns="columns"
      @selection-change="handleSelectionChange"
      show-pager
  >
  </wl-table>
</template>

<script>
export default {
  name: 'table-demo-04',
  data () {
    return {
      tableData: [
        {
          date: '2019-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '金沙江路 1518 弄',
          zip: 200333,
          tag: '家',
          status: 0
        },
        {
          date: '2019-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '金沙江路 1517 弄',
          zip: 200333,
          tag: '公司',
          status: 1
        },
        {
          date: '2019-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '金沙江路 1519 弄',
          zip: 200333,
          tag: '家',
          status: 0
        },
        {
          date: '2019-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '金沙江路 1516 弄',
          zip: 200333,
          tag: '公司',
          status: 0
        },
        {
          date: '2019-05-05',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '金沙江路 1515 弄',
          zip: 200333,
          tag: '公司',
          status: 0
        }
      ]
    }
  },
  methods: {
    handleSelectionChange (val) {
      console.log(val)
    }
  },
  computed: {
    columns () {
      return [
        { attrs: { type: 'selection' } },
        { label: '行序号', attrs: { type: 'index', width: 100 }, rowSpan: [ [ 0, 1 ], [ 2, 4 ] ] },
        { label: '日期', prop: 'date' },
        { label: '名称', prop: 'name', rowSpan: 'all' },
        {
          label: '地址',
          customerRenderText: ({ row, index }) => {
            const { province, city, address } = row
            return province + city + address
          }
        }
      ]
    }
  }
}
</script>
显示代码

# Attributes

参数 说明 类型 可选值 默认值
columns 表格列 array — []
data 表格数据 array — []
dbClickCopy 双击单元格复制 boolean — false
dbClickCopy 双击单元格复制 boolean — false

温馨提示

除以上列出的为本组件封装的新属性,其他el-input的任何属性均可直接继承

# Events

事件名 描述 参数
click 点击事件,如使用了loading,可用回调函数done来清除loading (fn:done)
confirm 当传入confirmType的时候,操作按钮确认事件 (fn:done)

← search-list →