App.vue
<template>
<div>
<el-card style="margin-top: 20px;">
<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" header-align="center" sortable align="center">
<el-table-column label="序號" type="index" min-width="70" header-align="center"></el-table-column>
<el-table-column prop="typename" label="名稱" header-align="center" align="center"></el-table-column>
<el-table-column label="操作" header-align="center" align="center">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">編輯
</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">刪除
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
background
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageTotal">
</el-pagination>
<el-dialog title="修改內容" :visible.sync="dialogFormVisible">
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="left" label-width="90px">
<el-form-item label="名稱" prop="typeName">
<el-input v-model="ruleForm.typename" placeholder=""></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="modifyUser()">確 定</el-button>
</div>
</el-dialog>
</el-card>
</div>
</template>
<script>
export default {
name: 'FuncModType',
data () {
return {
tableData: [], // 表格數據
currentPage: 1, // 當前頁
pageSize: 10, //每頁大小
pageTotal: 0, //頁數
dialogFormVisible: false,
ruleForm : {
typename: '',
},
rules : {
typename: [{ required: true, message: '請輸入4字', trigger: 'blur' },
{min: 4, max: 4, message: '長度爲4個字符', trigger: 'blur'}],
},
newForm : {}
}
},
mounted() {
this.allSearch(); // 程序一開始便執行
},
methods: {
/* 加載全部數據 */
allSearch() {
var data = []
this.$http
.post('/test')
.then(response => {
console.log(response.data.data.length)
if (response.data.code == 201 || response.data.code == 202 || response.data.code == 204) {
this.$message({showClose: true, message: '頁面加載失敗！', type: 'error'});
return false;
}
else{
withCredentials: true
for (let i = 0; i < response.data.data.length; i++) {
var obj = {}
obj.typename = response.data.data[i].typename
data[i] = obj
}
this.tableData = data
if (response.data.data.length > 0) {
this.pageTotal = response.data.data.length;
}
else {
this.pageTotal = 0;
}
}
})
.catch(error => {
console.log(error)
})
},
/* 操作--打開修改對話框 */
handleEdit (index, row) {
console.log("xxxxx " +index + " " + JSON.stringify(row))
this.ruleForm.index = index + (this.currentPage - 1) * this.pageSize
this.ruleForm.typename = row.typename // 當前行的typename
this.newForm.old = row.typename
this.dialogFormVisible = true
},
/* 修改當前列的內容 */
modifyUser () {
this.tableData[this.ruleForm.index].typename = this.ruleForm.typename // 前端的改變
this.newForm.typename = this.ruleForm.typename
this.newForm.action = "update"
this.dialogFormVisible = false
this.$refs.ruleForm.validate((valid) => {
if (valid) { // 傳至數據庫後臺
this.$axios
.post('/newType', this.$qs.stringify(this.newForm), {headers: {'Content-Type': "application/x-www-form-urlencoded"}})
.then(response => {
withCredentials: true
if(response.data.code == 200){
this.$message({message: '修改《' + this.ruleForm.typename + '》成功！', type: 'success'})
return true;
} else{
this.$message({showClose: true, message: '修改《' + this.ruleForm.typename + '》失敗！', type: 'error'});
return false;
}
})
.catch(error => {
console.log(error)
})
} else {
return false;
}
})
},
/* 操作--刪除 */
handleDelete (index, row) {
this.$confirm(
"是否刪除此類別？",
"確定刪除",
{
confirmButtonText: "確定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
var title = row.typename
var dform ={}
dform["action"] = "delete"
dform.typename = title
this.$axios
.post('/newType', this.$qs.stringify(dform), {headers: {'Content-Type': "application/x-www-form-urlencoded"}})
.then(response => {
if(response.data.code == 200) {
this.tableData.splice(index + (this.currentPage - 1) * this.pageSize, 1) // 前端的刪除
this.$message({
type :"success",
message:"刪除成功！"
})
}else if(response.data.code == 202){
this.$message({
type :"error",
message:"該類別下有新聞，無法刪除！"
})
}
})
.catch(error => {
console.log(error)
})
})
.catch(() => {
this.$message({
type: "info",
message: "已取消刪除"
});
});
},
/* 分頁 */
handleSizeChange (size) {
this.pagesize = size
},
/* 分頁 */
handleCurrentChange (currentPage) {
this.currentPage = currentPage
},
}
}
</script>
<style scoped>
</style>
關於某列的內容隱藏，可以在 el-form-item 中寫一個 v-if="hide()"
在 methods中，寫一個函數 hide() {} 就可以了
java：
@PostMapping(value = "/test")
public String str() {
JSONArray ja1 = new JSONArray();
JSONObject jo1 ;
for(int i=0; i<15; i++) {
jo1 = new JSONObject();
jo1.put("typename", "java"+i);
ja1.add(jo1);
}
JSONObject jo = new JSONObject();
jo.put("code", 200);
jo.put("data", ja1);
System.out.println(jo.toString());
return jo.toString();
}
json格式：
{"code":200,"data":[
{"typename":"java0"},{"typename":"java1"},{"typename":"java2"},{"typename":"java3"},
{"typename":"java4"},{"typename":"java5"},{"typename":"java6"},{"typename":"java7"},
{"typename":"java8"},{"typename":"java9"},{"typename":"java10"}, {"typename":"java11"},
{"typename":"java12"},{"typename":"java13"},{"typename":"java14"}
]}
結果：
