[VUE]element uiを使用してコンポーネントtableを書き直し、動的カラムカスタムロードを実現

table.vue tableコンポーネント、書き換えコンポーネントステータス列が0の場合は無効、1の場合は有効、フィルタを追加してel-tagのスタイルを変更

export default {
  name: 'Table',
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'danger'
      }
      return statusMap[status]
    }
  },
  props: {
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    },
    tableKey: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {

    }
  }
}

コンポーネントの呼び出し

   
      
cloumns: [{
        prop: 'enabled',
        label: '  ',
        width: 100,
        align: 'center'
      },
      {
        prop: 'id',
        label: 'ID',
        width: 100,
        align: 'center'
      },
      {
        prop: 'name',
        label: '  ',
        width: 200,
        align: 'center'
      },
      {
        prop: 'code',
        label: '  ',
        width: 200,
        align: 'center'
      },
      {
        prop: 'description',
        label: '  ',
        align: 'left'
      }],
アナログデータ
list: [{
  id:1001,
  name:'aa',
  code:'aa',
  enabled: 0,
  description: 'aa'
}]