wl tree table
1.0.0
Компонент el-tree-table основан на vue и element-ui и добавляет некоторые новые функции, основанные на реализации vue-element-admin. Настоящим заявляем, что бизнес-реализация Treetable будет основана на вышеупомянутых проектах с открытым исходным кодом. Если есть какие-либо нарушения, пожалуйста, свяжитесь с нами вовремя. Он написан на основе el-таблицы element-ui.
Расширение в основном включает в себя: отображение границ, фиксированную высоту, отображение флажков, соответствие выбора флажков ассоциации родитель-потомок и условия отключения флажков.
npm i @weilan/el-tree-table --save
или
npm i @weilan/el-tree-table -S
import TreeTable from '@weilan/el-tree-table'
Vue.use(TreeTable)
Пример
<treeTable :data="tree_table" :columns="columns" флажок расширитьВсе родительские границы :options="{key:'id', дочерние элементы:'Children'}" @treeTableSelect="getTreeTableSelect" />
<script>
export default {
name: 'app',
data(){
return {
columns: [
{
value: "id",
text: "值",
},
{
value: "name",
text: "名字"
}
],
tree_table:[
{
id: "1",
name: "第1级",
Children: [
{
id: "1-1",
name: "第1-1级",
Children: [
/* {
id: "1-1-1",
name: "第1-1-1级",
}, */
{
id: "1-1-2",
name: "第1-1-2级",
Children: [
{
id: "1-1-2-1",
name: "第1-1-2-1级",
},
{
id: "1-1-2-2",
name: "第1-2-2-2级",
},
]
},
]
},
{
id: "1-2",
name: "第1-2级",
Children: [
{
id: "1-2-1",
name: "第1-2-1级",
},
{
id: "1-2-2",
name: "第1-2-2级",
},
]
},
]
}
]
}
},
methods: {
getTreeTableSelect(val){
console.log(val);
}
},
}
</script>
Параметры: data Описание:树形数据: Array, Object Требуется: true Дополнение:对象或数组
Параметры: columns Описание: Тип列属性: Array Обязательно: false Дополнительно: text: 显示在表头的文字,value: 对应data的key。treeTable将显示相应的value, width: 每列的宽度，为一个数字(可选),如果你想要每个字段都有自定义的样式或者嵌套其他组件，columns可不提供，直接像在el-table一样写即可，如果没有自定义内容，提供columns将更加的便捷方便
Параметры: expandAll Описание:是否展开全部типы: Boolean Обязательно: false
Параметры: evalFunc Описание: Тип解析函数: Function
Параметры: evalArgs Описание: Тип解析函数参数: Array
Приведенное выше описание см. (https://github.com/PanJiaChen/vue-element-admin/tree/master/src/comComponents/TreeTable).
Параметры: описание options : nodekey字段及children字段: Boolean обязательно: false Дополнение:重要！根据id和children盒子字段来父子关联处理数据，默认{key: "id", children: "children"},如需自定义，请一块修改
Параметры: checkBox Описание:是否显示复选框Тип: Boolean Требуется: false
Параметры: описание height :用于固定表头: Необходимое Number : false
Параметры: описание border : Тип显示边框: Boolean Требуется: false Дополнение:默认为true显示边框
Параметры: disabled Описание:当checkBox为true显示复选框时可用，判断是否禁用字段: Дополнение String :此参数传入内容为：data中表示复选框是否禁用的数据字段例{isDisabled: true, id: 1, children:[]}，则disabled: 'isDisabled'
Параметры: parentChild Описание:当checkBox为true显示复选框时可用，表示是否遵循父子关联Тип: Boolean Дополнение:默认false
Событие: openChildren Описание:点击图标展开子元素事件: function(row, status), 返回点击行Object, 展开状态Boolean
Событие: treeTableClick Описание:点击列表行事件щелчков: function(row), 返回点击行，注意：重复点击则取消选中并返回{}
Событие: treeTableSelect Описание:复选框选中事件: function(val), 返回选中数据
Слот:这是一个自定义列的插槽Атрибуты slot и columns属性могут существовать одновременно. Столбцы данных в столбцах будут отображаться слева от настраиваемого столбца слота.
