"true"
:model=
"queryform"
class
="demo-form-inline"
>
"姓名"
>
"queryform.name" placeholder=
"姓名"
>
<
/el-input>
<
/el-form-item>
"班級"
>
"queryform.classesid" placeholder=
"請選擇班級" clearable=
"">
"classes.name"
:value=
"classes.id" v-
for=
"classes in classeslist"
>
<
/el-option>
<
/el-select>
<
/el-form-item>
"primary"
@click
="querysubmit"
>查詢<
/el-button>
<
/el-form-item>
<
/el-form>
<
!-- 列表 --
>
"tabledata"
@selection
-change=
"handleselectionchange" style=
"width: 100%"
>
"selection"
>
<
/el-table-column>
"#" prop=
"id" width=
"50"
>
<
/el-table-column>
"birthday" label=
"生日" width=
"180"
>
<
/el-table-column>
"hobbynames" label=
"愛好" width=
"180"
>
<
/el-table-column>
"name" label=
"姓名" width=
"180"
>
<
/el-table-column>
"性別"
>
"scope"
>
}<
/template>
<
/el-table-column>
"age" label=
"年齡"
>
<
/el-table-column>
"所屬班級"
>
"scope"
>
for=
"classes in classeslist" v-if=
"classes.id==scope.row.classesid"
>
}<
/span>
<
/template>
<
/el-table-column>
"birthday" label=
"建立日期" width=
"180"
>
<
/el-table-column>
"操作"
>
"scope"
>
"mini" type=
"success"
@click
="edit(scope.row.id)"
>編輯<
/el-button>
"mini" type=
"danger"
@click
="del(scope.row.id)"
>刪除<
/el-button>
<
/template>
<
/el-table-column>
<
/el-table>
<
!-- 分頁 --
>
:page-count=
"pagecount"
:current-page=
"queryform.pagenum"
@current
-change=
"gotopage"
layout=
"prev, pager, next"
>
<
/el-pagination>
"mini" type=
"danger"
@click
="batchdel()"
>批刪<
/el-button>
"mini" type=
"success"
@click
="add"
>新增<
/el-button>
<
/div>
<
/el-main>
<
/template>
export default
,//列表資料
tabledata:
,//table選擇資料id
selectids:
,//總頁數
pagecount:1,
classeslist:
}}, methods:
,edit
(id)
,del
(id)).
then
(res=
>
else})
},batchdel()
//呼叫ajax執行刪除操作
"選中的id為:"
+this
.selectids)},
gotopage
(pagenum)
,querysubmit()
,//列表頁的資料
list()
).then
(res=
>
)/* console.log("list 為:"+this.queryform);
this.tabledata = [, ]; */
//設定分頁資料,當前頁},
//查詢所有班級
listclasses()
)}},
created()
}).then(res=>) */
//post請求 後台必須加requestbody
//通過ajax載入列表頁的資料
this
.list()
;this
.listclasses()
;}}<
/script>
<
/style>
CSS 列表例項
css 列表屬性允許你放置 改變列表項標誌，或者將影象作為列表項標誌。css 列表屬性 list 屬性 描述 list style 簡寫屬性。用於把所有用於列表的屬性設定於乙個宣告中。list style image 將圖象設定為列表項標誌。list style position 設定列表中列表項標...
HTML 列表例項
41.無序列表 本例演示無序列表。乙個無序列表 42.有序的列表 乙個有序的列表 咖啡牛奶茶咖啡 牛奶茶43.不同型別的無序列表 本例演示乙個無序列表。標籤 描述 定義有序列表。circle 專案符號列表 square 專案符號列表 44.不同型別的有序列表 本例演示不同型別的有序列表。數字列表 蘋...
vue 列表渲染
列表渲染 v for指令 v for in data 如果需要 索引 index v for item,index in data 物件 v for index,item,key in obj 例子 總結 v for 最多可以有三個引數 格式v for index,item,key in data ...