element ui tree table
1.0
Расширьте компонент таблицы ElementUI для поддержки древовидной структуры.
npm install element-ui-tree-table -SПроект зависит от Element-UI, его нужно сначала внедрить
import TreeTableComponent from 'element-ui-tree-table'
import 'element-ui-tree-table/dist/index.css'
Vue . use ( TreeTableComponent , {
prefix : 'i' // 可选
} )данные испытаний
< template >
< div id = " app " >
< i-tree-table height = " 600px " id-key = " rowKey " :columns = " columns "
@select = " onSelect "
@trigger = " onTrigger "
:data = " data " border >
< el-table-column label = "负责人" prop = " leader " />
< el-table-column label = "创建时间" prop = " createTime " />
< el-table-column label = "经验要求" prop = " expr " >
< template slot-scope="scope">
< span v-if = " scope.row.expr " >{{scope.row.expr}}</ span >
< span v-else >————</ span >
</ template >
</ el-table-column >
< el-table-column label = "发布天数" prop = " date " />
</ i-tree-table >
< br />
< el-button type = " primary " size = " small " @click = " add " >增加一行</ el-button >
</ div >
</ template >
< script >
import data from ' ./components/data '
import TreeTable from ' ./components/tree-table '
export default {
name : ' App ' ,
components : {
TreeTable
},
data () {
return {
data,
columns : [{
type : ' index ' ,
align : ' center '
}, {
type : ' selection ' ,
align : ' center '
}, {
label : '职位名称' ,
prop : ' name '
}],
id : 1000
}
},
methods : {
add () {
this . data . push ({
rowKey : this . id ++ ,
name : '新增行' ,
leader : '管理员' ,
$expanded : true ,
createTime : ' 2019-07-24 ' ,
expr : ' ' ,
date : ' 1天'
})
},
onSelect ( selection ) {
console . log (selection)
},
onTrigger ( row , expanded ) {
/**
* 在这里可以保留折叠状态
* 也可以设置reserve-expaned属性为true保留状态 但是你不能够设置默认值，设置了默认值的行将不受控，因为* 组件肯定是选择用户传入$expaned属性为准
* 所以推荐的做法是监听trigger事件
*/
row . $expanded = expanded
}
}
}
</ script >| свойство | тип | иллюстрировать | значение по умолчанию |
|---|---|---|---|
| данные | Множество | Источник данных: по умолчанию необходимо указать атрибут rowKey для уникальной идентификации строки. | - |
| идентификационный ключ | Нить | Уникальный индекс источника данных | строкаКлюч |
| столбцы | Множество | Настройте столбцы индекса, выберите столбцы и разверните столбцы | - |
| икона | Нить | развернуть значок | el-icon-caret-right |
| класс триггера | Нить | Развернуть класс кнопки | - |
| расширенный резерв | логическое значение | Сохранять ли развернутое состояние. Рекомендуется не устанавливать расширение по умолчанию, если это свойство имеет значение true. Сохранения развернутого состояния можно добиться путем прослушивания триггеров. | - |
| Исходные элементы конфигурации стола | - | Обратитесь к документации element-ui. | - |
Уведомление:
| свойство | тип | иллюстрировать | Необязательное значение |
|---|---|---|---|
| этикетка | Нить | Отображаемый заголовок | - |
| опора | Нить | Имя поля, соответствующее содержимому столбца, вы также можете использовать атрибут свойства. | - |
| выровнять | Нить | Выравнивание | левый/центр/правый |
| ширина | Нить | Соответствующая ширина столбца | - |
| зафиксированный | Строка, логическое значение | Независимо от того, зафиксирован ли столбец слева или справа, true означает фиксирование слева. | |
| рендер-заголовок | Функция(ч, {столбец, $индекс}) | Функция, используемая для отображения заголовка столбца. Область меток. | |
| имя класса | Нить | Имя класса столбца | |
| имя-класса-метки | Нить | Имя пользовательского класса для заголовка текущего столбца. | |
| показать-переполнение-подсказку | логическое значение | Показывать всплывающую подсказку, когда контент слишком длинный и скрыт | |
| минимальная ширина | Нить | Минимальная ширина соответствующего столбца. Отличие от ширины в том, что ширина фиксирована, а функция min-width пропорционально распределяет оставшуюся ширину столбцу, для которого установлена минимальная ширина. | |
| выравнивание по заголовку | Нить | Выравнивание заголовка. Если этот пункт не установлен, будет использоваться выравнивание таблицы. | левый/центр/правый |
| изменяемый размер | логическое значение | Можно ли изменить ширину соответствующего столбца путем перетаскивания (атрибут border должен быть установлен в значение true) |
| свойство | тип | иллюстрировать | Необязательное значение |
|---|---|---|---|
| тип | Нить | Соответствующий тип столбца, если установлен выбор, будет отображено поле множественного выбора, если установлен индекс, будет отображен индекс строки. | выбор/индекс |
| этикетка | Нить | Отображаемый заголовок | - |
| опора | Нить | Имя поля, соответствующее содержимому столбца, вы также можете использовать атрибут свойства. | - |
| выровнять | Нить | Выравнивание | левый/центр/правый |
| ширина | Нить | Соответствующая ширина столбца | - |
| зафиксированный | Строка, логическое значение | Независимо от того, зафиксирован ли столбец слева или справа, true означает фиксирование слева. | |
| рендер-заголовок | Функция(ч, {столбец, $индекс}) | Функция, используемая для отображения заголовка столбца. Область меток. | |
| имя класса | Нить | Имя класса столбца | |
| имя-класса-метки | Нить | Имя пользовательского класса для заголовка текущего столбца. | |
| выбираемый | Функция(строка, индекс) | Это допустимо только для столбцов с типом = выбор. Тип — Function. Возвращаемое значение Function используется для определения того, можно ли проверить флажок этой строки. | |
| показать-переполнение-подсказку | логическое значение | Показывать всплывающую подсказку, когда контент слишком длинный и скрыт | |
| минимальная ширина | Нить | Минимальная ширина соответствующего столбца. Отличие от ширины в том, что ширина фиксирована, а функция min-width пропорционально распределяет оставшуюся ширину столбцу, для которого установлена минимальная ширина. | |
| выравнивание по заголовку | Нить | Выравнивание заголовка. Если этот пункт не установлен, будет использоваться выравнивание таблицы. | левый/центр/правый |
| изменяемый размер | логическое значение | Можно ли изменить ширину соответствующего столбца путем перетаскивания (атрибут border должен быть установлен в значение true) |
| название события | эффект | параметр |
|---|---|---|
| курок | Срабатывает при изменении расширенного состояния, обычно используется для сохранения состояния. | (узел источника данных данных, расширенное состояние) |
| имя метода | эффект | параметр |
|---|---|---|
| развернутьВсе | Развернуть все | - |
| свернутьВсе | скрыть все | - |
Обратитесь к документации element-ui.
