山东大学暑期项目实训

最新推荐文章于 2021-07-30 19:53:05 发布

原创最新推荐文章于 2021-07-30 19:53:05 发布 · 109 阅读

CC 4.0 BY-SA版权

在这个暑期项目实训的第四周中，我们专注于制作文章和专题的标签模板。通过提供的代码段，我们可以看到一个用于创建专题的表单，包括输入专题名称和简介。此外，还有一个展示博客列表的表格，列出了博客名称和操作选项，如编辑和删除。用户可以通过hover弹窗查看完整的博客名称，并能进行编辑和删除操作，提供了便捷的博客管理体验。

暑期项目实训第四周（二）

制作文章label模板，专题label模板；


 <div>
    <Leftbar>
    </Leftbar>
    <headers_copy>
    </headers_copy>
    <div class="s-content">

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
               style="margin-top: 80px;margin-left:250px;margin-right: 50px" class="demo-ruleForm">
        <el-form-item label="专题名称" prop="subName">
          <el-input v-model="ruleForm.subName"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="专题简介" prop="content">
          <el-input type="textarea" v-model="ruleForm.content"></el-input>
        </el-form-item>
        <br>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

 <div>
    <Leftbar>
    </Leftbar>
    <headers_copy>

    </headers_copy>
    <el-table  class="blog"
               :data="tableData"
               style="width: 100%">

      <el-table-column
          label="博客名称"
          width="550">
        <template slot-scope="props">
          <el-popover trigger="hover" placement="top">
            <p>博客名称: <span content="name">
            {{props.row.title}}
          </span></p>
            <div slot="reference" class="name-wrapper">
              <el-button type="text"><span content="name">
            {{props.row.title}}
          </span></el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column  label="操作" >
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="primary"plain icon="el-icon-edit" @click="ChangeArticle(scope.row.aid)"></el-button>
            <el-button type="primary"plain icon="el-icon-delete" @click="DeleteArticle(scope.row.aid)"></el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
  </div>