element-ui table 二次封装

结合项目需求，将element ui table进行了二次封装,封装后通用表格配置更方便

使用时，配置table-cols 以及table-data 来设置表格每列 

<m-table
    :load-data="loadData"
    :is-index="true"
    :is-selection="true"
    :table-data="tableData"
    :table-cols="tableCols"
    :pagination="pagination">
  <template v-slot:input="data">
    <span v-if="data.data.type===1">{{ data.data.id }}</span>
    <el-input v-else v-model="data.data.id"/>
  </template>
  <template v-slot:opt="data">
    <el-button @click="play(data.data)">播放</el-button>
  </template>
  <template v-slot:empty>
    <div>我是空数据提示内容</div>
  </template>
</m-table>

tableCols: [
  {
    label: "日期", prop: 'broadcast_date', formatter: (row) => {
    }
  },
  {label: "节目名称", prop: 'name',},
  {label: "频道", prop: 'channel_name',},
  {label: "id", type: "slot", slotName: 'input',},
  {label: "id", prop: "id", type: "input"},
  {label: "操作", type: "slot", slotName: 'opt',},
  {
    label: "操作", type: "button", formatter: (row) => {
      if (row.index % 2 === 1) {
        return [{
          label: "播放",
          handle: (row) => {
            this.play(row)
          },
          isDisabled: (row) => {
            return row.index % 3 === 1
          }
        },
          {
            label: "放映",
            handle: (row) => {
              this.play(row)
            },
            disabled: true
          },]
      } else {
        return [{
          label: "收听", handle: (row) => {
            console.log("收听", row)
          }
        }]
      }
    },

  }
],

 

 

预留solt 可根据自己需求扩展  组件   

<el-table-column
    v-for="item in tableCols"
    :key="item.id"
    :prop="item.prop"
    :fixed="item.fixed"
    :label="item.label"
    :width="item.width"
    align="center">
  <template slot-scope="scope">
    <slot v-if="item.type==='slot'" :name="item.slotName" :data="scope.row"></slot>
    <el-input
        v-if="item.type==='input'"
        v-model="scope.row[item.prop]"
        :size="item.size || size"
        :disabled="item.disabled || (item.isDisabled && item.isDisabled(scope.row))"
        @focus="item.focus && item.focus(scope.row)"
        @blur="item.blur && item.blur(scope.row)">
    </el-input>

github地址：https://github.com/zhangxiang0316/vueUtils