Platform project ~ element-table with vue
a Description: One of the front two basic functions, display table of
two purposes of
back-end data transfer to the front, there are two uses
a form just to show action, not to do anything for each column modifications
Some form of column 2 for extra processing
we will illustrate
three first scenario
form only show, not to do anything for each column modification of
the core idea of dynamically generated column
<el-table v-if = xianshi2 ref = "multipleTable": data = . "(Data || []) Slice ((. 1-The currentPage) pageSize *, * The currentPage pageSize)" style = "width: 100%">
<Table EL-V-for-column = "(Item, index) in DATA2 ": Key =" index ": label =" item.ziduan ": width =" item.width ">
<= Template slot-scope" scope ">
<span> {{scope.row [item.key]}} </ span>
</ Template>
</ EL-Table-column>
</ EL-Table>
Description
1: form data representative of display data: display DATA2 representative of dynamic columns, by read cycle
2 scope behalf slot usage, usage belonging vue
Features
1 save a lot of code, you can display only a few lines of a large number of column
2 can not do the operation for modifying a column
3 can not only show certain columns, you need to limit the back-end column returns
Four second scenario
particular column forms need to be modified, so that all display columns required handwritten
<el-table v-if = xianshi1 ref = "multipleTable":. Data = "(list2 || []) slice ((currentPage- . 1) * pageSize, The currentPage * pageSize) "style =" width: 100% ">
<EL-Table-column prop =" ID "label =" ID "> </ EL-Table-column>
<Template slot-scope = "scope">
<span: class = "{yangshi: Chuli (scope.row.STATE)}"> {{}} scope.row.STATE </ span>
</ Template>
</ EL-Table-column>
< EL-Table-column prop = "the INFO" label = "the INFO": Show-overflow-ToolTip = to true> </ EL-Table-column>
</ EL-Table>
Description
1 performs different processing for different columns, prop, and ID are written as a column name to
the characteristics of
1 if the column is more,Need to write multiple columns show the code N
2 can do judge extended for different column
3 is limited to the front display
five summary
1 selected based on different scenarios you need something
six supplementary TABLE
1: show-overflow-tooltip = true is too long for column displays only the front section
2 <el-pagination v-if = xianshi1 class = "fy" layout = "prev, pager, next" @ current-change = "current_change" : total = "total_1" background> </ el-pagination> with the use of the above functions, automatic pagination