Библиотека компонентов element-ui используется в последних проектах.Поскольку это фоновая система управления, часто приходится работать с таблицей и сталкиваться с некоторыми проблемами в процессе редактирования стиля.На официальном сайте представлено множество API для таблица, которую можно настроить самостоятельно. , может в основном соответствовать требованиям продукта, но не приведены конкретные случаи, и информация в Интернете относительно кратка. Вот некоторые часто используемые операции. Если есть аналогичные функции, вы можете сделать ссылка.
Для конкретного использования рекомендуется внимательно прочитать главу таблицы официального сайта:
element. Вы голодны? Можете ли вы/#/this-cn/com…
Демонстрация проекта загружена на github, вы можете скачать:
# 克隆到本地
git clone git@github.com:Hanxueqing/Element-table.git
# 安装依赖
npm install
# 开启本地服务器localhost
npm run dev
адрес проекта:GitHub.com/Хан Сыворотка/…
Содержимое пользовательских столбцов
Требование: добавьте кнопку действия в последний столбец таблицы.
пройти черезslot-scope="scope"Кнопка «Добавить действие» представляет собой специально предназначенный для нас слот, который удобно настраивать и добавлять различный контент.
" class="hljs "> <template slot-scope="scope">
<el-button size="mini" type="primary">编辑</el-button>
<el-button size="mini" type="danger">删除</el-button>
</template>
</el-table-column>
scope.$index получает текущий индекс строки
Доступ к добавленной кнопке действия можно получить черезscope.$indexВы можете получить индекс, соответствующий текущей строке
<el-table-column label="操作" width="160">
<template slot-scope="scope">
<el-button size="mini" type="primary" plain @click = "showIndex(scope.$index)">点击显示当前行下标</el-button>
</template>
</el-table-column>
Вы можете работать с указанной строкой в соответствии с индексом
scope.row получает текущее значение свойства
пройти черезscope.row.属性名Вы можете получить значение атрибута, соответствующее текущей строке
<el-table-column label="操作" width="160">
<template slot-scope="scope">
<el-button size="mini" type="primary" plain @click = "showName(scope.row.name)">点击获取姓名属性</el-button>
</template>
</el-table-column>
Нажмите кнопку, чтобы получить значение атрибута имени текущей строки.
в состоянии пройтиscope.row.属性名и тернарные операторы для стилизации специальных значений свойств
<el-table-column prop="name" :label="langConfig.table.name[lang]" width="200">
<template slot-scope="scope">
<div :class="scope.row.name === '王大虎' ? 'specialColor':''">{{scope.row.name}}</div>
</template>
</el-table-column>
Напишите стиль specialColor, который устанавливает красный цвет шрифта.
.specialColor{
color:red;
}
Установить стиль заголовка
Требования: измените стиль заголовка на синий цвет фона, белый цвет шрифта и вес слова 400.
header-cell-class-name
Описание: метод обратного вызова className ячейки заголовка, или вы можете использовать строку, чтобы установить фиксированное className для всех ячеек заголовка.
Тип: Функция ({строка, столбец, rowIndex, columnIndex})/String
Функциональная форма: передать метод headerStyle в header-cell-class-name
<el-table
:data="tableData[lang]"
class="table"
stripe
border
:header-cell-class-name="headerStyle"
>
Написать headerStyle, вернуть имя класса tableStyle
headerStyle ({row, column, rowIndex, columnIndex}) {
return 'tableStyle'
}
Напишите стиль tableStyle в стиле
<style lang = "scss">
.tableStyle{
background-color: #1989fa!important;
color:#fff;
font-weight:400;
}
</style>
Строковая форма: напрямую назначьте имя tableStyle имени класса-заголовка-ячейки.
<el-table
:data="tableData[lang]"
class="table"
stripe
border
header-cell-class-name="tableStyle"
>
header-cell-style
Описание: метод обратного вызова стиля ячейки заголовка также может использовать фиксированный объект, чтобы установить один и тот же стиль для всех ячеек заголовка.
Тип: функция ({строка, столбец, rowIndex, columnIndex})/объект
Функциональная форма: передать метод tableHeaderStyle в стиль заголовка ячейки
<el-table
:data="tableData[lang]"
class="table"
stripe
border
:header-cell-style='tableHeaderStyle'
>
Напишите метод tableHeaderStyle для возврата стиля
tableHeaderStyle ({row, column, rowIndex, columnIndex}) {
return 'background-color:#1989fa;color:#fff;font-weight:400;'
}
Форма объекта: Напишите стили непосредственно в объекте
<el-table
:data="tableData[lang]"
class="table"
stripe
border
:header-cell-style="{
'background-color': '#1989fa',
'color': '#fff',
'font-weight': '400'
}">
header-row-class-name
Описание: Метод обратного вызова className строки заголовка или строки можно использовать для установки фиксированного className для всех строк заголовка.
Тип: функция ({строка, rowIndex})/строка
Используйте аналог заголовка-cell-class-name
Примечание. Разница между именем класса-заголовка-строки и именем-класса-заголовка-ячейки:
Имя класса строки заголовка добавляется выше tr, а имя класса ячейки заголовка добавляется выше th.
header-row-class-name:
Поэтому, если вы хотите отобразить стиль, добавленный в tr, вам нужно закрыть оригинальный стиль в element-ui, иначе он будет перезаписан! (например, цвет фона)
header-cell-class-name:
header-row-style
Описание: метод обратного вызова стиля строки заголовка также может использовать фиксированный объект для установки одного и того же стиля для всех строк заголовка.
Тип: функция ({строка, rowIndex})/объект
Используйте аналогичный стилю заголовка ячейки
установить стиль строки
Требование: установить светло-синий цвет фона строк в таблице.
row-class-name
Описание: Метод обратного вызова для className строки или строки можно использовать для установки фиксированного className для всех строк.
Тип: Функция ({строка, rowIndex})/строка
Используйте аналог заголовка-cell-class-name
row-style
Описание: метод обратного вызова стиля строки, или вы можете использовать фиксированный объект, чтобы установить один и тот же стиль для всех строк.
Тип: функция ({строка, rowIndex})/объект
Используйте аналогичный стилю заголовка ячейки
Функциональная форма: передать метод tableRowStyle в стиль строки
<el-table
:data="tableData[lang]"
class="table"
border
:row-style="tableRowStyle"
>
Напишите метод tableRowStyle для возврата стиля
// 修改table tr行的背景色
tableRowStyle ({ row, rowIndex }) {
return 'background-color:#ecf5ff'
}
Нажмите кнопку, чтобы управлять текущей строкой
Требование: нажмите кнопку на панели действий, измените состояние кнопки и установите для текущей строки серый цвет.
Добавить кнопку через slot-scope
<el-table-column label="操作" width="160">
<template slot-scope="scope">
<el-button size="mini" type="danger" plain v-if = "scope.row.buttonVisible" @click = "changeTable(scope.row.buttonVisible,scope.$index)">禁用该行</el-button>
<el-button size="mini" type="primary" plain v-else @click = "changeTable(scope.row.buttonVisible,scope.$index)">启用该行</el-button>
</template>
</el-table-column>
Добавьте поле buttonVisible к каждому данным и используйте команду v-if/v-else для отображения и скрытия кнопки.
{
date: '2016-05-10',
name: '王大虎',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333,
buttonVisible: true
}
Напишите метод changeTable для изменения значения buttonVisible при нажатии кнопки.
changeTable (buttonVisible, index) {
this.tableData[index].buttonVisible = !buttonVisible
}
Добавьте стиль строки в el-table и передайте метод tableRowStyle в стиль строки
<el-table
:data="tableData"
class="table"
border
:row-style="tableRowStyle"
>
Напишите метод tableRowStyle для установки цвета фона в соответствии со значением buttonVisible для каждой строки.
// 修改table tr行的背景色
tableRowStyle ({ row, rowIndex }) {
if (this.tableData[rowIndex].buttonVisible === false) {
return 'background-color: rgba(243,243,243,1)'
}
}