<!--檔案點管理--> <template><section><!--工具條--><el-col :span="24" class="toolbar" style="padding-bottom: 0px;"><el-form :inline="true" :model="filters"><el-form-item><el-input v-model="filters.keyWord" placeholder="請輸入名稱"></el-input></el-form-item><el-form-item><el-button type="primary" v-on:click="getListData">查詢</el-button></el-form-item><el-form-item><el-button type="primary" @click="handleEdit">新增</el-button></el-form-item></el-form></el-col><!--列表展示--><el-table :data="listData" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width:98%"><el-table-column type="selection" width="55"></el-table-column><!-- 設置表頭數據源，并循環渲染出來，property對應列內容的字段名，具體查看數據源格式 rightHeader--><!--動態展示數據 :key__屬性名 :property__屬性值 :label__表頭名稱--><el-table-column v-for="info in rightHeader" :key="info.key" :property="info.key" :label="info.label"><template slot-scope="scope"><!--當前行屬性對應的值-->{{scope.row[scope.column.property]}} <!-- 渲染對應表格里面的內容 --></template></el-table-column><!--格式化狀態列__在此處有的列,要在數據源rightHeader_去除__不然重復--><el-table-column label="狀態" prop="status"><template slot-scope="scope"><font v-if="scope.row.status === 1" color="green">使用</font><font v-else-if="scope.row.status === 0" color="red">禁用</font><font v-else color="blue">未知</font></template></el-table-column><!--<el-table-column label="啟用狀態"><template slot-scope="scope"><el-switchv-model="scope.row.status":active-color="ACT_COLOR":inactive-color="INACT_COLOR"></el-switch></template></el-table-column>--><!--操作--><el-table-column label="操作" width="150"><template scope="scope"><el-button size="small" @click="handleEdit(scope.$index, scope.row)">編輯</el-button><el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">刪除</el-button></template></el-table-column></el-table><!--工具條--><el-col :span="24" class="toolbar"><el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量刪除</el-button><el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;"></el-pagination></el-col><!--編輯界面--><el-dialog title="編輯" v-model="editFormVisible" :close-on-click-modal="false"><el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm"><!--動態回顯數據--><el-form-item v-for="info in rightHeader" v-bind:prop="info.key" :key="info.key" :property="info.key" :label="info.label"><el-input v-model="editForm[info.key]" auto-complete="off"></el-input></el-form-item><!--如果有字段沒在rightHeader--><el-form-item label="狀態" prop="status"><el-input v-model="editForm.status" auto-complete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click.native="editFormVisible = false">取消</el-button><el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button></div></el-dialog></section> </template> <script>export default {data() {return {/*表頭*/rightHeader:[{label: '檔案編號',key: 'sn'},{label: '檔案類型',key: 'archivesType_id'}],filters: {keyWord: ''},listData: [], //列表數據total: 0, //總條數currentPage: 1, //當前頁pageSize:10, //每頁條數listLoading: false,sels: [], //列表選中列editFormVisible: false,//編輯界面是否顯示editLoading: false,/*表單驗證字段*/editFormRules: {sn: [{ required: true, message: '請輸入檔案類型名稱', trigger: 'blur' }],status: [{ required: true, message: '請輸入狀態', trigger: 'blur' }]},//編輯界面數據editForm: {id:0,sn:'',archivesType_id:'',archivesPoint_id:''}}},methods: {handleCurrentChange(val) {this.currentPage = val;this.getListData();},//獲取檔案管理數據列表getListData() {this.listLoading = true;let para = {currentPage: this.currentPage,pageSize:this.pageSize,keyWord: this.filters.keyWord};/*只需要全局修改__/archives/input/__即可*/this.$http.post("/archives/input/selectForList",para).then(res=>{console.log(res);let jsonResult = res.data;if (jsonResult.result){this.listData = jsonResult.data.result;this.total = jsonResult.data.total;}this.listLoading=false;}).catch(error=>{this.listLoading = false;this.$message({ message: '服務器異常['+error.message+']', type: 'error' });})},//刪除handleDel: function (index, row) {this.$confirm('確認刪除該記錄嗎?', '提示', {type: 'warning'}).then(() => {this.listLoading = true;this.$http.delete("/archives/input/delete/"+row.id,{}).then((res) => {this.listLoading = false;if (res.data.result){this.$message({message: "刪除"+res.data.message,type: 'success'});this.getListData();}});}).catch((error) => {this.listLoading = false;this.$message({message: "刪除"+error.data.message,type: 'error'});});},/*表單重置*/resetForm(formName){if (this.$refs[formName] !== undefined) {this.$refs[formName].resetFields();}},//顯示編輯界面handleEdit: function (index, row) {console.log("新增___",row);if (row == undefined ){//表單重置this.resetForm("editForm");this.editForm.id = 0;this.editFormVisible=true;}else{this.editFormVisible = true;console.log("row____",row);this.editForm = Object.assign({}, row);}},//編輯editSubmit: function () {this.$refs.editForm.validate((valid) => {if (valid) {this.$confirm('確認提交嗎？', '提示', {}).then(() => {this.editLoading = true;let para = Object.assign({}, this.editForm);let url = "/archives/input/update";if (para.id == 0){url = "/archives/input/insert";}this.$http.post(url,para).then((res) => {this.editLoading = false;console.log(res);if (res.data.result){this.$message({message: res.data.message,type: 'success'});this.$refs['editForm'].resetFields();this.editFormVisible = false;this.getListData();}}).catch((error)=>{this.editLoading = false;this.$message({message: error.data.message,type: 'success'});});});}});},selsChange: function (sels) {console.log(sels);this.sels = sels;},//批量刪除batchRemove: function () {//var ids = this.sels.map(item => item.id).toString();//迭代所選id組成一個數據作為參數傳遞var ids = this.sels.map(item => item.id);this.$confirm('確認刪除選中記錄嗎？', '提示', {type: 'warning'}).then(() => {this.listLoading = true;//NProgress.start();let para = { ids: ids };console.log("para",para);this.$http.post("/archives/input/batchDelete",para).then((res) => {this.listLoading = false;//NProgress.done();console.log(res);if (res.data.result){this.$message({message: '刪除成功',type: 'success'});this.getListData();}else {this.$message({message: res.data.message,type: 'error'});}});}).catch((error) => {this.listLoading = false;this.$message({message: '刪除失敗'+error.data.message,type: 'error'});});}},mounted() {this.getListData();}}</script><style scoped></style>

總結

以上是生活随笔為你收集整理的vue+elementUI动态生成表格列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。