フォームデータの取得、検索ボックスデータフィルター、現在の状態の変更

<template>
<div>

<div class="container" v-if="tabIndex === 0">
<span style="dispaly:inline-block; margin-right:20px "> プラットフォーム</span>


<el-select
v-model="AppName"
filterable
clearable
class="width188 mb16"
size="medium"
placeholder="プラットフォームを選択してください"
@change = "selectOnchange"
>
<el-option
v-for="(項目, インデックス) (AppList 内)"
:key="インデックス"
:label="項目。テキスト"
:value="item.value"
>
</el-option>
</el-select>


<el-table
:data="list"
height="calc(100vh - 270px )"
strip
border
style="width:100%"
ref="multipleTable"
>
<el-table-column prop="rn" label="序号" width="180"> </el-table-column>
<el-table-column prop="AppName" label="平台" width="180">
</el-table-column>
<el-table-column prop="Account" label="平台账号" width="180">
</el-table-column>
<el-table-column prop="Accountface" label="封面" width=" 180">
<template slot-scope="scope">
<el-image
:src="scope.row.Accountface"
style="幅: 40px; 高さ: 40px; カーソル:pointer"
></el-image>
</template>
</el-table-column>
<el-table-column prop="Title" label="标题" width="180">
</el-table-column >
<el-table-column prop="Count1" label="浏览量" width="180">
</el-table-column>
<el-table-column prop="CreateTime" label="発行時間间" width ="180">
</el-table-column>
<el-table-column
prop="Type"
:formatter="formatType"
label="类型"
width="180"
>
</el-table-column>
<el-table-column prop="Extend1" label="操作">
<template slot-scope="scope">
<el-button
type="primary"
icon="el-icon-edit"
plain
@click="onShow(scope.row)"
size="small"
>
查看
</el-button>
</template>
</el-table-column>
</el-テーブル>


<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[10, 20, 40, 60] , 80, 100]"
:page-size.sync="rows"
layout="合計、サイズ、前、ページャー、次、ジャンパー"
:total="合計"
style="margin-top: 20px"
>
</el -ページネーション>
</div>
</div>
</template>

<script>
export default { name: "Statistic", props: { tabIndex: { type: [文字列, 数値], デフォルト: 0, }, }, data() { return { list: [], //Form AppName: "", AppList: [], //プラットフォーム名合計: 0, //合計行数: 10, // ページあたり 10 個のデータ page: 1, // 現在のページ }; },

Mounted() { // ドロップダウンボックスデータ this.getplatformList(); // コンテンツ統計 this.getVWsfarticleList();


}、

メソッド: { selectOnchange() { this.getVWsfarticleList(); }, handleSizeChange(val) { console.log(`${val} items per page`); this.rows = val; this.getVWsfarticleList(); }, handleCurrentChange (val) { console.log(`現在のページ: ${val}`); this.page = val; this.getVWsfarticleList(); }, // ドロップダウンボックスデータ getplatformList() { let data = { strWhere: "" , }; this.$api.getplatformList(data).then((res) => { // console.log(res); this.AppList = res.data;

});
// console.log("クリック");
},

// 搜索
// seachaccount() { // console.log("submit!"); // this.getVWsfarticleList(); // }、

// 型変換
formatType(row) { return row.Type === "1" ? "Graphics" : row.Type === "2" ? "Video" : ""; } ,

// View
onShow(val) { // console.log(val); this.$emit("chakan", val); },

// コンテンツ統計を取得
getVWsfarticleList() { let data = { wheres: "", // 条件ページネーション: 1, // ページネーション 1 がページネーションであるかどうか page: this.page, // 現在のページ番号行: this.rows , / /行数 }; if (this.AppName != "") { data.wheres = "extend4=" + this.AppName; } this.$api.getVWsfarticleList(data).then((res) => { console .log(res); for (var i = 0; i < res.data.length; i++) { res.data[i].CreateTime = this.getNowFormatDate( res.data[i].CreateTime ); } this 。リスト = res.data;



this.total = res.total;

});

// テーブルは行の先頭までスクロールします
this.$nextTick(() => { this.$refs.multipleTable.bodyWrapper.scrollTop = 0; }); },

// 時間経過
getNowFormatDate(value) { var CurrentDate = ""; var Year = value.getFull Year(); var 月 = value.getMonth() + 1; var Day = value.getDate(); var 時間 = value.getHours(); var 分 = value.getMinutes(); var MonthVal = 月 >= 10 ? 月: "0" + 月; var DayVal = 日 >= 10 ? 日: "0" + 日; var hoursVal = 時間 >= 10 ? 時間: "0" + 時間; var MinutesVal = 分 >= 10 ? 分："0" + 分; CurrentDate = Year + "-" + MonthVal + "-" + DayVal + " " +

時間値 +
":" +
分値 +
":00";
現在の日付を返します。
}、
}、
};
</script>

<スタイル>
</スタイル>

フォームデータの取得、検索ボックスデータフィルター、現在の状態の変更

おすすめ