一、表格展示
我们要实现这样的一个功能：
根据选择的不同国家，在表格中展示相应的数据。
当没有选择时的展示效果
当选择国家后，显示的结果
表格底部，页码翻页效果
界面代码
<a-form layout="inline">
<a-form-item label="Country">
<a-select style="width: 150px;"
@change="queryWhiteList"
>
<a-select-option v-for="country in countrys" :key="country">{{ country }}</a-select-option>
</a-select>
</a-form-item>
<!--search result-->
<data-tables :data="data">
<el-table-column
v-for="title in titles"
:prop="title.prop"
:label="title.label"
:key="title.prop"
>
</el-table-column>
<el-table-column key="status" prop="status" label="Status">
<template slot-scope="scope">
<span v-if="scope.row.status === 'pending'">
<a-icon type="loading" :width="25" />
</span>
<span v-else-if="scope.row.status === 'success'">
<a-progress type="circle" :percent="100" :width="25" />
</span>
</template>
</el-table-column>
</data-tables>
</a-form>
js实现
<script>
import { getAppInfo } from "@/api/appInfo";
const countrys = ["Indonesia", "Philippines", "Vietnam"];
const data = [];
const titles = [
{
prop: "appName",
label: "AppName"
},
{
prop: "tagName",
label: "Tag Name"
},
{
prop: "strIsLock",
label: "Lock Status"
},
{
prop: "updateTime",
label: "Operation Time"
}
];
export default {
data() {
return {
countrys,
titles,
data
};
},
mounted() {},
methods: {
jump() {
window.open(this.log, "_blank");
},
queryWhiteList(value) {
getAppInfo(value, "sit2").then(res => {
this.data = res.data.data;
console.info("getAppInfo response:"+JSON.stringify(this.data));
return data;
});
},
success(msg) {
this.$message.success(msg);
},
error(msg) {
this.$message.error(msg);
},
warning(msg) {
this.$message.warning(msg);
}
}
};
</script>
二、给表格的列增加排序功能
只需要在列中加入参数sortable="custom"
<el-table-column
v-for="title in titles"
:prop="title.prop"
:label="title.label"
:key="title.prop"
sortable="custom"
>
</el-table-column>
三、增加搜索框
初始状态
搜索结果
修改界面代码
1、增加search app搜索框，将搜索关键字绑定绑定到 filters[0].value
2、在table加入 :filters="filters"
<p>Query White List</p>
<div style="margin-bottom: 10px">
<el-row>
<el-col :span="18">
<div class="block">
<span class="demonstration">Please select one country</span>
<a-select style="width: 150px;" @change="queryWhiteList">
<a-select-option v-for="country in countrys" :key="country">{{ country }}</a-select-option>
</a-select>
</div>
</el-col>
<el-col :span="6">
<el-input placeholder="search app" v-model="filters[0].value"></el-input>
</el-col>
</el-row>
</div>
<!--search result-->
<data-tables
:data="data"
:filters="filters"
>
<el-table-column
v-for="title in titles"
:prop="title.prop"
:label="title.label"
:key="title.prop"
sortable="custom"
>
</el-table-column>
<el-table-column key="status" prop="status" label="Status">
<template slot-scope="scope">
<span v-if="scope.row.status === 'pending'">
<a-icon type="loading" :width="25" />
</span>
<span v-else-if="scope.row.status === 'success'">
<a-progress type="circle" :percent="100" :width="25" />
</span>
</template>
</el-table-column>
</data-tables>
修改js代码
1、增加 filters 变量
export default {
data() {
return {
countrys,
titles,
data,
filters: [
{
prop: "appName",
value: ""
},
{
prop: "tagName",
value: ""
},
{
prop: "operator",
value: ""
},
{
prop: "status",
value: ""
},
{
prop: "isLock",
value: ""
}
]
};
},
四、给查询结果的每一行增加操作
修改界面代码
在table加入:action-col="actionCol"
<data-tables
:data="data"
:filters="filters"
:action-col="actionCol"
>
<el-table-column
v-for="title in titles"
:prop="title.prop"
:label="title.label"
:key="title.prop"
sortable="custom"
>
</el-table-column>
<el-table-column key="status" prop="status" label="Status">
<template slot-scope="scope">
<span v-if="scope.row.status === 'pending'">
<a-icon type="loading" :width="25" />
</span>
<span v-else-if="scope.row.status === 'success'">
<a-progress type="circle" :percent="100" :width="25" />
</span>
</template>
</el-table-column>
</data-tables>
修改js
在return中增加actionCol定义
actionCol: {
props: {
label: "Actions",
align: "center"
},
buttons: [
{
handler: row => {
console.info("appName:"+row.appName);
/*
postUnlock(this.country, this.env, row.appName).then(res => {
if (res.data.errorCode !== 0) {
this.error(res.data.msg);
} else if (res.data.errorCode === 0) {
this.success(res.data.msg);
this.getDataList();
}
});
*/
},
label: "Delete"
}
]
}
网友评论