Зная это, вам больше не нужно писать кучу el-table-column

внешний интерфейс Vue.js
Зная это, вам больше не нужно писать кучу el-table-column

Это первый день моего участия в ноябрьском испытании обновлений, подробности о мероприятии:Вызов последнего обновления 2021 г.

Всем привет, я Нед👀, ученик младших и начальных классов, который только что поступил на фронт менее двух лет🌹, впереди еще долгий путь🎉, давайте вместе усердно работать❤~

предисловие

Недавно я писал проект по тренировке рук и столкнулся с проблемой.el-tableПредметов слишком много, я написал кучуel-table-column, в результате чего код получился слишком длинным и выглядел особенно утомительным, а затем я нашел привлекательный метод, который мгновенно спас мои глаза.

Давайте поделимся этим ниже!

В заголовок

image.pngВыше приведены все элементы в таблице, снимите первый флажок, слот последней операции, всего семь элементов, то естьel-table-columnВсего 9 пар. Это просто невыносимо!

image.png

Этот рисунок используется только в качестве примера и не соответствует приведенному выше.

5 из нихel-form-item, это все.

Итак, я подумал в то время, могу ли я использоватьv-forоказыватьel-table-columnА что насчет этой этикетки? Сохраняя флажки и слот финального действия, нам нужно отрендерить только средние элементы.

После моих экспериментов это действительно достижимо.

Написав это, я начал задаваться вопросом, почему у меня не было этой идеи раньше?Или я могу писать намного меньше💩

Код реализации выглядит следующим образом (часть метки):

<el-table-column
            v-for="item in columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            :formatter="item.formatter"
            :width="item.width">
</el-table-column>

Идея заключается в следующем: определить метки, которые должны отображаться в массиве, пройтись по массиву, чтобы добиться желаемого эффекта,formatterОн используется нами для завершения преобразования представленных данных и данных отображения страницы. Конкретное написание нижеjsНекоторые написаны.

Способ определения массиваvue3 composition apiСпособ написания, такой образ мышления также может быть достигнут путем написания на Vue2, в конце концов, главное — это идея (ах, я до сих пор не могу придумать такой способ мышления раньше).

Скажем еще раз, такой метод записи должен возвращать значение каждый раз, когда записывается функция или переменная, что тоже очень хлопотно, ххххх

Код реализации выглядит следующим образом (часть JS):

const columns = reactive([
      {
        label:'用户ID',
        prop:'userId'
      },
      {
        label:'用户名',
        prop:'userName'
      },
      {
        label:'用户邮箱',
        prop:'userEmail'
      },
      {
        label:'用户角色',
        prop:'role',
        formatter(row,column,value){
          return {
            0:"管理员",
            1:"普通用户"
          }[value]
        }
      },
      {
        label:'用户状态',
        prop:'state',
        formatter(row,column,value){
          return {
            1:"在职",
            2:"离职",
            3:"试用期"
          }[value]
        }
      },
      {
        label:'注册时间',
        prop:'createTime'
      },
      {
        label:'最后登陆时间',
        prop:'lastLoginTime'
      }
    ])

напиши в конце

Держись в пути! Давайте работать вместе ❤

Близится выпускной экзамен, вау, заходи в Наггетс время от времени побулькать🐱‍🐉

Категории