基于 element-ui table 的二次封装

使用方法

安装

npm install sasai-table-pane

作为组件引入

<template>
  <!-- sassi-table-pane -->
  <sassi-table-pane />
</template>

<script>
  import sassiTablePane from 'sassi-table-pane'
  export default {
    components: {
      sassiTablePane
    }
  }
</script>

表格功能 使用表格功能要声明表头、插入数据和列操作方法

<template>
  <!-- sassi-table-pane
    column: 表头内容
    table-list: 表格数据
    opera: 操作按钮
    loading: loading状态控制
  -->
  <sassi-table-pane
    :column.sync="tableColumn"
    :table-list.sync="tableList"
    :opera="tableOpera"
    :loading.sync="listLoading"
  />
</template>
<script>
  export default {
    data() {
      return {
        // loading状态
        listLoading: false,
        // 表头
        tableColumn: {
          // label 是表头
          // prop 是数据源
          {
            label: 'author',
            prop: 'author'
          },
          //  可以使用filter函数过滤一些比较简单的字符串内容
          {
            label: 'status'
            prop: 'status',
            filter: (val)=>{
              const textModel = [
                { text: 'Activited', value: 1 },
                { text: 'Pending', value: 2 },
                { text: 'Disabled', value: 0 }
              ]
              const item = textModel.filter((t) => t.value === val.status)[0]
              return item && item.text
            }
          }
        },
        // 表格数据
        tableList: [
          { status: 0, author: 'Rafong' },
          { status: 1, author: 'ZRF' },
        ],
        // 操作按钮
        tableOpera:[
          // 表头名称
          label: 'opera',
          /** 操作按钮
           * label: 名称
           * type: 类型
           * method： 事件
           * disabled: 可用状态
          */
          options: [{ label: 'clear', type: 'text', method: this._beforeClear,disabled: false }]
        ]
      },
    },
    method: {
      _beforeClear(){
        console.log('_beforeClear')
      }
    }
  }
</script>

表单功能

<template>
  <!-- sassi-table-pane
    form: 表单配置
    v-model: 表单value，接收表单值
  -->
  <sassi-table-pane :form.sync="formConfig" v-model="search" />
</template>
<script>
  export default {
    data() {
      return {
        search: {},
        formConfig: {
          // 开关
          switch: true,
          // 是否内联
          inline: true,
          // 列表
          list: [
            { type: 'input', label: 'name', name: 'name' },
            { type: 'radio-group', label: 'test', name: 'test' }
          ],
          // 操作按钮
          opera: [
            {
              label: '搜索',
              type: 'default'
            }
          ]
        }
      }
    },
    watch: {
      // 监听表单变化
      search: {
        deep: true,
        handler(val) {
          // handle
        }
      }
    }
  }
</script>

分页器

<template>
  <!-- sassi-table-pane
    pagination: 分页器配置
  -->
  <sassi-table-pane :pagination.sync="pagination" />
</template>
<script>
  export default {
    data() {
      // 和一般分页器用法一样
      return {
        // 分页器
        pagination: {
          switch: true,
          total: 50,
          currentPage: 0,
          align: 'right',
          pageSize: 10,
          pageSizes: [10, 20, 30]
        }
      }
    }
  }
</script>

完整版本

<template>
  <table-pane
    v-model="search"
    :table-list.sync="tableList"
    :form.sync="formConfig"
    :loading.sync="listLoading"
    :column.sync="tableColumn"
    :opera="tableOpera"
    :pagination.sync="pagination"
    height="500"
  />
</template>
<script>
  export default {
    data() {
      return {
        listLoading: false,
        tableColumn: {
          {
            label: 'author',
            prop: 'author'
          },
          {
            label: 'status'
            prop: 'status',
            filter: (val)=>{
              const textModel = [
                { text: 'Activited', value: 1 },
                { text: 'Pending', value: 2 },
                { text: 'Disabled', value: 0 }
              ]
              const item = textModel.filter((t) => t.value === val.status)[0]
              return item && item.text
            }
          }
        },
        tableList: [
          { status: 0, author: 'Rafong' },
          { status: 1, author: 'ZRF' },
        ],
        tableOpera:[
          label: 'opera',
          options: [{ label: 'clear', type: 'text', method: this._beforeClear,disabled: false }]
        ],
        search: {},
        formConfig: {
          switch: true,
          inline: true,
          list: [
            { type: 'input', label: 'name', name: 'name' },
            { type: 'radio-group', label: 'test', name: 'test' }
          ],
          opera: [
            {
              label: '搜索',
              type: 'default'
            }
          ]
        },
        pagination: {
          switch: true,
          total: 50,
          currentPage: 0,
          align: 'right',
          pageSize: 10,
          pageSizes: [10, 20, 30]
        }
      },
    }
  }
</script>