iView表格二次封装

怼烎@ 2022-01-12 02:19 617阅读 0赞

在使用iview的过程中，很多时候需要处理大部分的表格，且操作是一样的时候，那么就可以抽出来，做成共公的一部分。方便偷懒~ 如图:

为了实现表格自带操作栏，且可以自定义覆盖，我们开始二次封装

原理

  1. 1.使用$attrs $listeners 全部传递iview Table组件默认的所有属性和事件
  2. 2.在自定义的组件中，修改columns的值，来实现我们想要的效果
  3. 复制代码

实现

a.定义TableRender组件

  1. <template>
  2.   <Table v-bind="$attrs" v-on="$listeners"></Table>
  3. </template>
  5. <script type="text/jsx">
  6.   import styles from './table-runder.module.less'
  7.   export default {
  8.     name: 'TableRender',
  9.     props: {
  10.       openAction: { // 是否开启操作列
  11.         type: Boolean,
  12.         default: true
  13.       },
  14.       action: { // 操作列附带的基础配置
  15.         type: Object,
  16.         default: () => {
  17.           return {
  18.             title: '操作',
  19.             fixed: 'right',
  20.             align: 'center',
  21.             name: 'action'
  22.           }
  23.         }
  24.       }
  25.     },
  26.     created () {
  27.     },
  28.     watch: {
  29.       openAction: {
  30.         handler (c) {
  31.           c ? this.mergeColumns() : this.resetColumns()
  32.         },
  33.         immediate: true
  34.       }
  35.     },
  36.     methods: {
  37.       mergeColumns () {
  38.         const { columns } = this.$attrs
  39.         if (columns && columns[columns.length - 1].name === 'action') {
  40.           return
  41.         }
  42.         const merge = this.getActions()
  43.         columns.push(merge)
  44.         this.$attrs.columns = columns
  45.       },
  46.       resetColumns () {
  47.         const { columns } = this.$attrs
  48.         if (columns && columns[columns.length - 1].name === 'action') {
  49.           columns.pop()
  50.           this.$attrs.columns = columns
  51.         }
  52.       },
  53.       getActions () {
  54.         const action = { ...this.action }
  55.         let self = this
  56.         return {
  57.           ...action,
  58.           render (h, params) {
  59.             return (
  60.               // 我也不晓得为啥 className={styles.tableBtn} 这样不生效，所以只能styles['table-btn'] :(
  61.               <div class={styles['table-btn']}>
  62.                 <i-button type="success" size="small" nativeOnClick={self.viewHandle.bind(self, params)}>查看</i-button>
  63.                 <i-button nativeOnClick={self.editorHandle.bind(self, params)} type="primary"
  64.                           size="small">编辑
  65.                 </i-button>
  66.                 <i-button nativeOnClick={self.removeHandle.bind(self, params)} type="error"
  67.                           size="small">删除
  68.                 </i-button>
  69.               </div>
  70.             )
  71.           }
  72.         }
  73.       },
  74.       viewHandle (params) {
  75.         this.$emit('on-view', params)
  76.       },
  77.       editorHandle (params) {
  78.         this.$emit('on-editor', params)
  79.       },
  80.       removeHandle (params) {
  81.         this.$emit('on-remove', params)
  82.       }
  83.     }
  84.   }
  85. </script>
  87. <style scoped>
  89. </style>
  90. 复制代码

b.同级别的样式文件

ps: 因为在实现的过程中使用了jsx,所以要把css当成模块来引入。在vue中，默认是启用css modules了的，但要求是需要我们把要启用该特性的css文件以 .module.css文件结尾（预编译css一样）。

  1. // table-runder.module.less
  2. .table-btn {
  3.   display: flex;
  4.   flex-direction: row;
  5.   justify-content: space-around;
  6.   align-content: flex-start;
  7. }
  8. 复制代码

c.调用

  1. <template>
  2.   <div class="container">
  3.     <h2>tableRender</h2>
  4.     <TableRender :open-action="true" :columns="tableTitle" :data="testList" @on-view="viewHandle"></TableRender>
  5.   </div>
  6. </template>
  8. <script type="text/jsx">
  9.   import TableRender from '@/common/TableRender'
  11.   export default {
  12.     name: 'test',
  13.     components: {
  14.       TableRender
  15.     },
  16.     data () {
  17.       return {
  18.         testList: [
  19.           { name: '张三', status: true },
  20.           { name: '李四', status: true },
  21.           { name: '王五', status: false },
  22.           { name: '钱六', status: true }
  23.         ],
  24.         tableTitle: [
  25.           {
  26.             title: '序号',
  27.             fixed: 'left',
  28.             align: 'center',
  29.             width: 65,
  30.             type: 'index'
  31.           }, {
  32.             title: '名称',
  33.             key: 'name'
  34.           }, {
  35.             title: '状态',
  36.             align: 'center',
  37.             minWidth: 120,
  38.             key: 'status',
  39.             render: (h, params) => {
  40.               const { row: { status } } = params
  41.               return (
  42.                 <p>{status ? '是' : '否'}</p>
  43.               )
  44.             }
  45.           }
  46.           // 指定列属性name为action，可启用自定义的操作，可以覆盖默认的操作栏的设置： 注: open-action 设置为false后失效
  47.           // {
  48.           //   title: 'Action',
  49.           //   name: 'action',
  50.           //   render: (h, params) => {
  51.           //     return (
  52.           //       <div>
  53.           //         <i-button type="primary">View</i-button>
  54.           //         <i-button type="primary">Del</i-button>
  55.           //       </div>
  56.           //     )
  57.           //   }
  58.           // }
  59.         ]
  60.       }
  61.     },
  62.     mounted () {
  63.     },
  64.     methods: {
  65.       viewHandle (params) {
  66.         this.$Modal.info({
  67.           content: JSON.stringify(params, null, '\t ')
  68.         })
  69.       }
  70.     }
  71.   }
  72. </script>
  74. <style scoped>
  75.   .container {
  76.     padding: 20px;
  77.   }
  78. </style>
  79. 复制代码

参数
























属性 说明 类型 默认值
open-action 是否启用操作栏，关闭后table将不再支持操作栏 Boolean true
action 操作栏的属性 Object {title: ‘操作’, fixed: ‘right’, align:’center’, name: ‘action’, render: Function}

注

  1. 自定义的列参见调用列中注释的代码
  2. 复制代码

github代码

转载于:https://juejin.im/post/5d01b8ef6fb9a07eb94f85a6

发表评论

表情：
评论列表 （有 0 条评论，617人围观）

还没有评论，来说两句吧...

相关阅读

    相关 AFN二次封装

    前言 对于开发人员来说，学习网络层知识是必备的，任何一款`App`的开发，都需要到网络请求接口。很多朋友都还在使用原生的`NSURLConnection`一行一行地写，代

    矫情吗；*矫情吗；*/ 0 赞/ 341 阅读

    相关 二次封装函数

    题目描述 已知函数 fn 执行需要 3 个参数。请实现函数 partial，调用之后满足如下条件： 1、返回一个函数 result，该函数接受一个参数 2、执行

    小鱼儿小鱼儿/ 0 赞/ 373 阅读

    相关 iView表格二次封装

    在使用iview的过程中，很多时候需要处理大部分的表格，且操作是一样的时候，那么就可以抽出来，做成共公的一部分。方便偷懒~ 如图: 为了实现表格自带操作栏，且可以自定义覆盖，

    怼烎@怼烎@/ 0 赞/ 618 阅读