diff --git a/backend/src/main/java/com/supwisdom/dlpay/portal/dao/impl/ArticleRepositoryImpl.java b/backend/src/main/java/com/supwisdom/dlpay/portal/dao/impl/ArticleRepositoryImpl.java
index 5e4a960..704c3b9 100644
--- a/backend/src/main/java/com/supwisdom/dlpay/portal/dao/impl/ArticleRepositoryImpl.java
+++ b/backend/src/main/java/com/supwisdom/dlpay/portal/dao/impl/ArticleRepositoryImpl.java
@@ -24,6 +24,7 @@
     StringBuilder sql = new StringBuilder("select a.*,c.name columnname from tb_article a left join tb_column c on a.columnid = c.columnid where a.isdelete = '0' ");
     String title = bean.getTitle();
     String status = bean.getStatus();
+    String columnid= bean.getColumnid();
     String savestartdate = bean.getSavestartdate();
     String saveenddate = bean.getSaveenddate();
     String releasestartdate = bean.getReleasestartdate();
@@ -36,6 +37,9 @@
     if (!StringUtil.isEmpty(status)) {
       sql.append(" and a.status =:status");
     }
+    if (!StringUtil.isEmpty(columnid)) {
+      sql.append(" and c.columnid =:columnid");
+    }
     if (!StringUtil.isEmpty(releasestartdate)) {
       sql.append(" and a.releasetime >=:releasestartdate");
     }
@@ -56,6 +60,9 @@
     if (!StringUtil.isEmpty(status)) {
       f.setParameter("status", status);
     }
+    if (!StringUtil.isEmpty(columnid)) {
+      f.setParameter("columnid", columnid);
+    }
     if (!StringUtil.isEmpty(releasestartdate)) {
       Timestamp timestamp = new Timestamp(sdf.parse(releasestartdate+"000000").getTime());
       f.setParameter("releasestartdate", timestamp);
diff --git a/backend/src/main/kotlin/com/supwisdom/dlpay/portal/bean/ArticleSearchBean.kt b/backend/src/main/kotlin/com/supwisdom/dlpay/portal/bean/ArticleSearchBean.kt
index 322bb0e..22d273a 100644
--- a/backend/src/main/kotlin/com/supwisdom/dlpay/portal/bean/ArticleSearchBean.kt
+++ b/backend/src/main/kotlin/com/supwisdom/dlpay/portal/bean/ArticleSearchBean.kt
@@ -3,6 +3,7 @@
 class ArticleSearchBean {
     var title: String = ""
     var status: String = ""
+    var columnid: String = ""
     var savestartdate: String = ""
     var saveenddate: String = ""
     var releasestartdate: String = ""
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index c977505..bc8deee 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -193,6 +193,10 @@
     'object-curly-spacing': [2, 'always', {
       objectsInObjects: false
     }],
-    'array-bracket-spacing': [2, 'never']
+    'array-bracket-spacing': [2, 'never'],
+    'quotes': 'off',
+    'semi' : 'off',
+    'comma-dangle' : 'off',
+    "no-tabs":"off"
   }
 }
diff --git a/frontend/src/views/article/components/ArticleDetail.vue b/frontend/src/views/article/components/ArticleDetail.vue
index fefa8f5..9ef9147 100644
--- a/frontend/src/views/article/components/ArticleDetail.vue
+++ b/frontend/src/views/article/components/ArticleDetail.vue
@@ -140,6 +140,7 @@
       getAllColumn().then(response => {
         if (response.list) {
           this.columnList = response.list
+          console.log(this.columnList);
         } else {
           this.columnList = []
         }
diff --git a/frontend/src/views/article/list.vue b/frontend/src/views/article/list.vue
index f879a93..56bc174 100644
--- a/frontend/src/views/article/list.vue
+++ b/frontend/src/views/article/list.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="app-container">
     <div class="filter-container">
-      <div class="filter-item" style="margin-right:15px">文章标题</div>
+      <div class="filter-item" style="margin-right: 15px">文章标题</div>
       <el-input
         v-model="formData.title"
         placeholder="输入文章标题"
-        style="width: 320px;margin-right:50px"
+        style="width: 320px; margin-right: 50px"
         class="filter-item"
       />
-      <div class="filter-item" style="margin-right:15px">文章状态</div>
+      <div class="filter-item" style="margin-right: 15px">文章状态</div>
       <el-select
         v-model="formData.status"
-        style="width:200px;margin-right:50px"
+        style="width: 200px; margin-right: 50px"
         class="filter-item"
       >
         <el-option
@@ -21,14 +21,27 @@
           :value="item.value"
         />
       </el-select>
+      <div class="filter-item" style="margin-right: 15px">栏目</div>
+      <el-select
+        v-model="formData.columnid"
+        style="width: 200px; margin-right: 50px"
+        class="filter-item"
+      >
+        <el-option
+          v-for="(item, index) in columnList"
+          :key="item + index"
+          :label="item.name"
+          :value="item.columnid"
+        />
+      </el-select>
     </div>
     <div class="filter-container">
-      <div class="filter-item" style="margin-right:15px">保存日期</div>
+      <div class="filter-item" style="margin-right: 15px">保存日期</div>
       <el-date-picker
         v-model="saveDate"
         type="daterange"
         align="left"
-        style="width:320px;margin-right:50px"
+        style="width: 320px; margin-right: 50px"
         unlink-panels
         range-separator="至"
         start-placeholder="开始日期"
@@ -37,12 +50,12 @@
         :picker-options="pickerOptions"
         class="filter-item"
       />
-      <div class="filter-item" style="margin-right:15px">发布日期</div>
+      <div class="filter-item" style="margin-right: 15px">发布日期</div>
       <el-date-picker
         v-model="releaseDate"
         type="daterange"
         align="left"
-        style="width:320px;margin-right:50px"
+        style="width: 320px; margin-right: 50px"
         unlink-panels
         range-separator="至"
         start-placeholder="开始日期"
@@ -64,49 +77,56 @@
         清空
       </el-button>
     </div>
-    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+    >
       <el-table-column align="center" label="编号" width="100">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <span>{{ row.articleno }}</span>
         </template>
       </el-table-column>
 
       <el-table-column align="center" label="标题">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <span>{{ row.title }}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="120px" align="center" label="栏目">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <span>{{ row.columnname }}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="100px" label="状态" align="center">
-        <template slot-scope="{row}">
-          <el-tag v-if="row.status==='save'" size="medium">已保存</el-tag>
-          <el-tag v-if="row.status==='released'" type="success" size="medium">已发布</el-tag>
-          <el-tag v-if="row.status==='review'" type="warning" size="medium">审核中</el-tag>
+        <template slot-scope="{ row }">
+          <el-tag v-if="row.status === 'save'" size="medium">已保存</el-tag>
+          <el-tag v-if="row.status === 'released'" type="success" size="medium">已发布</el-tag>
+          <el-tag v-if="row.status === 'review'" type="warning" size="medium">审核中</el-tag>
         </template>
       </el-table-column>
       <el-table-column width="100px" label="保存时间">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <span>{{ dateFormat(row.createtime) }}</span>
         </template>
       </el-table-column>
       <el-table-column width="100px" label="发布时间">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <span>{{ dateFormat(row.releasetime) }}</span>
         </template>
       </el-table-column>
       <el-table-column label="排序" width="80" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <span>{{ row.ordernum }}</span>
         </template>
       </el-table-column>
       <el-table-column width="100px" label="是否展示" align="center">
-        <template slot-scope="{row}">
+        <template slot-scope="{ row }">
           <el-switch
             :value="row.isdisplay === '1'"
             active-color="#13ce66"
@@ -116,61 +136,109 @@
         </template>
       </el-table-column>
       <el-table-column width="160px" label="操作" align="center">
-        <template slot-scope="{row}">
-          <el-tooltip v-if="row.status==='save'" class="item" effect="dark" content="编辑" placement="bottom">
-            <router-link :to="'/article/edit/'+row.articleno">
-              <el-button type="primary" style="margin-right:10px" icon="el-icon-edit" circle size="mini" />
+        <template slot-scope="{ row }">
+          <el-tooltip
+            v-if="row.status === 'save'"
+            class="item"
+            effect="dark"
+            content="编辑"
+            placement="bottom"
+          >
+            <router-link :to="'/article/edit/' + row.articleno">
+              <el-button
+                type="primary"
+                style="margin-right: 10px"
+                icon="el-icon-edit"
+                circle
+                size="mini"
+              />
             </router-link>
           </el-tooltip>
-          <el-tooltip v-else class="item" effect="dark" content="查看" placement="bottom">
-            <router-link :to="'/article/examine/'+row.articleno">
-              <el-button type="primary" style="margin-right:10px" icon="el-icon-search" circle size="mini" />
+          <el-tooltip
+            v-else
+            class="item"
+            effect="dark"
+            content="查看"
+            placement="bottom"
+          >
+            <router-link :to="'/article/examine/' + row.articleno">
+              <el-button
+                type="primary"
+                style="margin-right: 10px"
+                icon="el-icon-search"
+                circle
+                size="mini"
+              />
             </router-link>
           </el-tooltip>
 
-          <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
-            <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="deleteArticle(row)" />
+          <el-tooltip
+            class="item"
+            effect="dark"
+            content="删除"
+            placement="bottom"
+          >
+            <el-button
+              type="danger"
+              icon="el-icon-delete"
+              circle
+              size="mini"
+              @click="deleteArticle(row)"
+            />
           </el-tooltip>
-          <el-tooltip v-if="row.status!=='save'" class="item" effect="dark" content="撤回" placement="bottom">
-            <el-button type="primary" size="mini" circle @click="withdrawArticle(row)">
-              <i class="iconfont iconchehui_huaban1" style="font-size:12px" />
+          <el-tooltip
+            v-if="row.status !== 'save'"
+            class="item"
+            effect="dark"
+            content="撤回"
+            placement="bottom"
+          >
+            <el-button
+              type="primary"
+              size="mini"
+              circle
+              @click="withdrawArticle(row)"
+            >
+              <i class="iconfont iconchehui_huaban1" style="font-size: 12px" />
             </el-button>
           </el-tooltip>
         </template>
       </el-table-column>
     </el-table>
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="formData.pageno"
       :limit.sync="formData.pagesize"
-      style="margin-top:0;"
+      style="margin-top: 0"
       @pagination="getArticleList"
     />
   </div>
 </template>
 
 <script>
-import moment from 'moment'
+import moment from "moment";
 import {
   getArticleList,
   deleteArticle,
   switchDisplay,
-  withdrawArticle } from '@/api/article'
-import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+  withdrawArticle,
+} from "@/api/article";
+import { getAllColumn } from "@/api/column";
+import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
 
 export default {
-  name: 'ArticleList',
+  name: "ArticleList",
   components: { Pagination },
   filters: {
     statusFilter(status) {
       const statusMap = {
-        published: 'success',
-        draft: 'info',
-        deleted: 'danger'
-      }
-      return statusMap[status]
-    }
+        published: "success",
+        draft: "info",
+        deleted: "danger",
+      };
+      return statusMap[status];
+    },
   },
   data() {
     return {
@@ -178,182 +246,220 @@
       total: 0,
       listLoading: false,
       formData: {
-        title: '',
-        status: '',
-        savestartdate: '',
-        saveenddate: '',
-        releasestartdate: '',
-        releaseenddate: '',
+        title: "",
+        status: "",
+        columnid: "",
+        savestartdate: "",
+        saveenddate: "",
+        releasestartdate: "",
+        releaseenddate: "",
         pageno: 1,
-        pagesize: 10
+        pagesize: 10,
       },
+      columnList: [],
       saveDate: null,
       releaseDate: null,
-      statusOptions: [{
-        value: '',
-        label: '所有'
-      },
-      {
-        value: 'save',
-        label: '已保存'
-      }, {
-        value: 'released',
-        label: '已发布'
-      }, {
-        value: 'review',
-        label: '审核中'
-      }, {
-        value: 'pass',
-        label: '已通过'
-      }, {
-        value: 'reject',
-        label: '已驳回'
-      }],
+      statusOptions: [
+        {
+          value: "",
+          label: "所有",
+        },
+        {
+          value: "save",
+          label: "已保存",
+        },
+        {
+          value: "released",
+          label: "已发布",
+        },
+        {
+          value: "review",
+          label: "审核中",
+        },
+        {
+          value: "pass",
+          label: "已通过",
+        },
+        {
+          value: "reject",
+          label: "已驳回",
+        },
+      ],
       pickerOptions: {
-        shortcuts: [{
-          text: '今天',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近三天',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
-            picker.$emit('pick', [start, end])
-          }
-        }, {
-          text: '最近一周',
-          onClick(picker) {
-            const end = new Date()
-            const start = new Date()
-            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
-            picker.$emit('pick', [start, end])
-          }
-        }]
-      }
-    }
+        shortcuts: [
+          {
+            text: "今天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近三天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+          {
+            text: "最近一周",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            },
+          },
+        ],
+      },
+    };
   },
   created() {
-    this.getArticleList()
+    this.getArticleList();
+    getAllColumn()
+      .then((response) => {
+        if (response.list) {
+          this.columnList = response.list;
+          this.columnList.unshift({ name: "所有", columnid: "" });
+        } else {
+          this.columnList = [];
+        }
+      })
+      .catch((error) => {
+        this.$message({
+          message: error.msg || "请求栏目异常",
+          type: "error",
+        });
+      });
   },
   methods: {
     getArticleList() {
-      this.listLoading = true
-      const saveDate = this.saveDate
-      const releaseDate = this.releaseDate
+      this.listLoading = true;
+      const saveDate = this.saveDate;
+      const releaseDate = this.releaseDate;
       if (saveDate != null) {
-        this.formData.savestartdate = saveDate[0]
-        this.formData.saveenddate = saveDate[1]
+        this.formData.savestartdate = saveDate[0];
+        this.formData.saveenddate = saveDate[1];
       } else {
-        this.formData.savestartdate = ''
-        this.formData.saveenddate = ''
+        this.formData.savestartdate = "";
+        this.formData.saveenddate = "";
       }
       if (releaseDate != null) {
-        this.formData.releasestartdate = releaseDate[0]
-        this.formData.releaseenddate = releaseDate[1]
+        this.formData.releasestartdate = releaseDate[0];
+        this.formData.releaseenddate = releaseDate[1];
       } else {
-        this.formData.releasestartdate = ''
-        this.formData.releaseenddate = ''
+        this.formData.releasestartdate = "";
+        this.formData.releaseenddate = "";
       }
-      getArticleList(this.formData).then(response => {
-        if (response.page) {
-          this.list = response.page.list
-          this.total = response.page.totalCount
-        } else {
-          this.list = null
-          this.total = 0
-        }
-        this.listLoading = false
-      }).catch(error => {
-        this.$message({
-          message: error.msg || '请求异常',
-          type: 'error'
+      getArticleList(this.formData)
+        .then((response) => {
+          if (response.page) {
+            this.list = response.page.list;
+            this.total = response.page.totalCount;
+          } else {
+            this.list = null;
+            this.total = 0;
+          }
+          this.listLoading = false;
         })
-        this.listLoading = false
-      })
+        .catch((error) => {
+          this.$message({
+            message: error.msg || "请求异常",
+            type: "error",
+          });
+          this.listLoading = false;
+        });
     },
     handleFilter() {
-      this.formData.pageno = 1
-      this.getArticleList()
+      this.formData.pageno = 1;
+      this.getArticleList();
     },
     clearFilter() {
-      this.formData.title = ''
-      this.formData.status = ''
-      this.saveDate = null
-      this.releaseDate = null
+      this.formData.title = "";
+      this.formData.status = "";
+      this.formData.columnid = "";
+      this.saveDate = null;
+      this.releaseDate = null;
     },
     dateFormat(date) {
       if (date === null) {
-        return ''
+        return "";
       }
-      return moment(date).format('YYYY-MM-DD HH:mm:ss')
+      return moment(date).format("YYYY-MM-DD HH:mm:ss");
     },
 
     switchDisplay(row) {
-      switchDisplay(row.articleno, { value: row.isdisplay === '1' ? '0' : '1' }).then(response => {
-        this.$message({
-          type: 'success',
-          message: '操作成功!'
+      switchDisplay(row.articleno, { value: row.isdisplay === "1" ? "0" : "1" })
+        .then((response) => {
+          this.$message({
+            type: "success",
+            message: "操作成功!",
+          });
+          row.isdisplay = response.result;
         })
-        row.isdisplay = response.result
-      }).catch(error => {
-        this.$message({
-          message: error.msg || '请求异常',
-          type: 'error'
-        })
-        this.listLoading = false
-      })
+        .catch((error) => {
+          this.$message({
+            message: error.msg || "请求异常",
+            type: "error",
+          });
+          this.listLoading = false;
+        });
     },
     withdrawArticle(row) {
-      this.$confirm('是否确认撤回该文章?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        withdrawArticle(row.articleno).then(response => {
-          this.$message({
-            type: 'success',
-            message: '撤回成功!'
-          })
-          this.handleFilter()
-        }).catch(error => {
-          this.$message({
-            message: error.msg || '请求异常',
-            type: 'error'
-          })
-          this.listLoading = false
-        })
-      }).catch(() => {
+      this.$confirm("是否确认撤回该文章?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
       })
+        .then(() => {
+          withdrawArticle(row.articleno)
+            .then((response) => {
+              this.$message({
+                type: "success",
+                message: "撤回成功!",
+              });
+              this.handleFilter();
+            })
+            .catch((error) => {
+              this.$message({
+                message: error.msg || "请求异常",
+                type: "error",
+              });
+              this.listLoading = false;
+            });
+        })
+        .catch(() => {});
     },
     deleteArticle(row) {
-      this.$confirm('是否确认删除该文章?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        deleteArticle(row.articleno).then(response => {
-          this.$message({
-            type: 'success',
-            message: '删除成功!'
-          })
-          this.handleFilter()
-        }).catch(error => {
-          this.$message({
-            message: error.msg || '请求异常',
-            type: 'error'
-          })
-          this.listLoading = false
-        })
-      }).catch(() => {
+      this.$confirm("是否确认删除该文章?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
       })
-    }
-  }
-}
+        .then(() => {
+          deleteArticle(row.articleno)
+            .then((response) => {
+              this.$message({
+                type: "success",
+                message: "删除成功!",
+              });
+              this.handleFilter();
+            })
+            .catch((error) => {
+              this.$message({
+                message: error.msg || "请求异常",
+                type: "error",
+              });
+              this.listLoading = false;
+            });
+        })
+        .catch(() => {});
+    },
+  },
+};
 </script>
 
 <style scoped>