column-plus v0.7.0

column-plus

说明

这个column-plus是element ui的el-table中的el-table-column的升级版，主要是可以根据配置文件生成列

实例

<template>
  <div class="hello">
    <el-table :data="tabledata">
      <el-table-column
      type="index"
      >
    </el-table-column>
      <columnPlus  v-bind="item" v-for="(item, key) in columnsConfig" :key="key"></columnPlus>
      <el-table-column>
        <template slot-scope="scope">
          {{scope.row.label}}--{{scope.row.num}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import columnPlus from '../package/column-plus'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
    // eslint-disable-next-line vue/no-unused-components
    columnPlus
  },
  data () {
    return {
      tabledata: [
        {
          label: '日期',
          num: '180',
          text: 'date'
        }, {
          label: '姓名',
          num: '180',
          text: 'name'
        }, {
          label: '地址',
          num: '90',
          text: 'address'
        }
      ],
      columnsConfig: [{
        prop: 'label',
        label: 'emun'
      }, {
        prop: 'num',
        label: '数据'
      }, {
        prop: 'text',
        label: '文案'
      }, {
        cellType: 'slots',
        label: '操作',
        renderCell: (scope) => {
          return (
            <el-button type="text" on-click={() => this.viewgoods(scope.row)}>
              输出log
            </el-button>
          )
        }
      }]
    }
  },
  methods: {
    viewgoods (data) {
      console.log(data)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

效果图