Элегантное использование табличного компонента в element-ui

JavaScript Element Vue.js

часто используемыйelement-uiтоварищи должны быть правыel-tableКомпонент очень знакомый, обычно он выглядит так:

<template>
  <el-table :data="tableData">
    <el-table-column
      prop="date"
      label="日期">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }]
    }
  }
}
</script>

Приведенный выше код очень правильный, но мне всегда кажется, что чего-то не хватает?

Да, в шаблонеel-table-columnпочти идентичный, повторяющийся

Используйте v-for для оптимизации столбца el-table в шаблонах

Используется следующееv-forversion, передавая каждый столбец как элемент конфигурации:

<template>
  <el-table :data="tableData">
    <el-table-column
      v-for="{ prop, label } in colConfigs"
      :key="prop"
      :prop="prop"
      :label="label">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data () {
    this.colConfigs = [
      { prop: 'date', label: '日期' },
      { prop: 'name', label: '姓名' },
      { prop: 'address', label: '地址' }
    ]
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }]
    }
  }
}
</script>

Преимущество этого в том, что если вы хотите добавить еще один столбец, вам не нужно перемещатьtemplate, простоthis.colConfigsДобавьте элемент конфигурации в этот массив{ prop: 'xxx', label: 'xxx' }Только что

Хотя добавить конфигурацию таким образом очень просто, и масштабируемость лучше, чем писать шаблон непосредственно перед, но если у меня есть колонка для рендеринга нескольких кнопок, вышеописанный способ не сработает

Другими словами, нам нужны простые атрибуты, которые можно отображать напрямую, добавляя элемент конфигурации, а также мы надеемся, что сложный рендеринг можно будет прописать в шаблоне.Как этого добиться?

Умело используйте слот, чтобы инкапсулировать слой для el-table

Давайте сначала посмотрим на упакованные компонентыmy-table:

// my-table.vue
<template>
  <el-table :data="data">
    <template v-for="colConfig in colConfigs">
      <slot v-if="colConfig.slot" :name="colConfig.slot">
      <el-table-column v-bind="colConfig"></el-table-column>
    </template>  
  </el-table>
</template>

<script>
export default {
  props: ['colConfigs', 'data']
}
</script>

Этот пакет на самом делеcolConfigsкакpropВходящий, но отличие от вышеприведенного примера в том, что есть еще один элемент конфигурацииslotАтрибут, через этот атрибут мы можем написать в шаблоне как начало статьи, использование следующее:

<template>
  <my-table
    :data="tableData"
    :col-configs="colConfigs">
    <!-- slot="opt" 不能省略，需要与下面配置项中的对应 -->
    <el-table-column slot="opt">
      <el-button size="mini" slot-scope="{ row }">查看</el-button>
    </el-table-column>
  </my-table>
</template>

<script>
export default {
  data () {
    this.colConfigs = [
      { prop: 'date', label: '日期' },
      { prop: 'name', label: '姓名' },
      { prop: 'address', label: '地址' },
      // 模版中的元素需要对应的有 slot="opt" 属性
      { slot: 'opt' }
    ]
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }]
    }
  }
}
</script>

Теперь мы хотим добавить столбец, просто добавьте элемент конфигурации или добавьте слот, отлично~

Подождите, предположим, у меня есть несколько столбцов в таблице, которые сложнее отобразить, и все эти столбцы похожи, например:

<template>
  <my-table
    :data="tableData"
    :col-configs="colConfigs">
    <el-table-column label="变化" slot="change">
      <span :slot-scope="row">
        {{ row['change'] > 0 ? '+' + row['change']: row['change'] }}
      </span>
    </el-table-column>
    <el-table-column label="趋势" slot="trend">
      <span :slot-scope="row">
        {{ row['trend'] > 0 ? '+' + row['trend']: row['trend'] }}
      </span>
    </el-table-column>
  </my-table>
</template>

Снова переписываем шаблон...

Используйте :is="компонент"

Мы можем добавить еще одно свойство к элементу конфигурацииcomponent, пользователь может указатьcomponentатрибут для специальной обработки столбца, реализованный следующим образом:

// my-table.vue
<template>
  <el-table :data="data">
    <template v-for="colConfig in colConfigs">
      <slot v-if="colConfig.slot" :name="colConfig.slot">
      <component
        v-else-if="colConfig.component"
        :is="config.component" 
        :col-config="colConfig">
      </component>
      <el-table-column v-else v-bind="colConfig"></el-table-column>
    </template>  
  </el-table>
</template>

<script>
export default {
  props: ['colConfigs', 'data']
}
</script>

Затем приведенный выше пример можно переписать как:

<template>
  <my-table
    :data="tableData"
    :col-configs="colConfigs">
  </my-table>
</template>
<script>

const PrefixPlusText = {
  props: ['colConfig'],
  template: `
    <el-table-column :label="colConfig.label">
      <span :slot-scope="{ row }">
        {{ parseInt(row[colConfig.prop]) > 0 ? '+' + row[colConfig.prop] : row[colConfig.prop] }}
      </span>
    </el-table-column>
  `
}

export default {
  data () {
    this.colConfigs = [
      { prop: 'change', label: '变化' component: PrefixPlusText },
      { prop: 'name', label: '趋势', component: PrefixPlusText },
    ]
    return {
      tableData: [{
        change: '12%',
        trend: '10%
      }, {
        change: '-12%',
        trend: '-10%'
      }]
    }
  }
}
</script>

Суммировать

В качестве компонента отображения данных таблица часто используется в повседневной разработке.В этой статье вы можете увидеть комбинациюvueизslot/componentФункции, сделать слой инкапсуляции, может значительно упростить использование таблицы, большую часть времени нужно только написать свойство конфигурации.

Наконец, дайте небольшойdemo

Категории