其他分享
首页 > 其他分享> > 基于饿了吗+vue的可拖拽列宽加科隐藏列的表格

基于饿了吗+vue的可拖拽列宽加科隐藏列的表格

作者:互联网

注意:需要安装vue脚手架,并且导入element-ui

环境搭建:(22条消息) Vue项目搭建 + 引入ElementUI_Do Re Mi的博客-CSDN博客_引入elementui

在学习Vue的过程中,官方网站都是给了非常详细的介绍,资料地址:https://cn.vuejs.org/v2/guide/installation.html

 

//按钮:
<el-popover
      placement="bottom"
      :width="600"
      :visible="visible"
    >
      <!-- 配置列面板 -->
      <transition name="fade">

        <div>
          <div>选择显示字段</div>
          <div>
            <el-checkbox v-model="showColumn.date">日期</el-checkbox>
            <el-checkbox v-model="showColumn.name">姓名</el-checkbox>
            <el-checkbox v-model="showColumn.provinces">省份</el-checkbox>
            <el-checkbox v-model="showColumn.city">市区</el-checkbox>
            <el-checkbox v-model="showColumn.adreess">地址</el-checkbox>
            <el-checkbox v-model="showColumn.zipCode">邮编</el-checkbox>
          </div>
        </div>
      </transition>
     
      <template #reference>
        <i
          class="el-icon-setting"
          style="font-size: 22px; cursor: pointer;color:blue;float: right;margin-right:100px; margin-bottom:50px;"
          @click="visible = true"
        ></i>
      </template>
    </el-popover>

 
//表格:
<el-table :data="tableData" border style="width: 100%" ref="table">
 
<el-table-column
  prop="date"
  label="日期"
  width="280"
sortable
  v-if="showColumn.date"
>
</el-table-column>
 
<el-table-column
  prop="name"
  label="姓名"
  width="280"
sortable
  v-if="showColumn.name"
>
</el-table-column>
 
<el-table-column
  prop="province"
  label="省份"
  width="280"
  v-if="showColumn.provinces"
>
</el-table-column>
<el-table-column
  prop="city"
  label="市区"
  width="280"
  v-if="showColumn.city"
>
</el-table-column>
 
<el-table-column
  prop="address"
  label="地址"
  width="280"
  v-if="showColumn.adreess"
>
</el-table-column>
 
<el-table-column
  prop="zip"
  label="邮编"
  width="280"
  v-if="showColumn.zipCode"
>
</el-table-column>
 
<el-table-column label="操作" width="240" align="center">
  <template #default="scope">
    <el-button @click="handleClick(scope.row)" type="text" size="small"
      >查看</el-button
    >
    <el-button type="text" size="small">编辑</el-button>
  </template>
</el-table-column>
</el-table>
</div>
</template>


//js:

<script> export default { data() { return { visible: false, tableData: [ { date: "2016-05-02", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1518 弄", zip: 200333, }, { date: "2016-05-04", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1517 弄", zip: 200333, }, { date: "2016-05-01", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1519 弄", zip: 200333, }, { date: "2016-05-03", name: "王小虎", province: "上海", city: "普陀区", address: "上海市普陀区金沙江路 1516 弄", zip: 200333, }, ], // 列的配置化对象,存储配置信息 showColumn: { date: true, name: true, provinces: true, city: true, adreess: false, zipCode: true, }, }; }, mounted() { // 发请求得到showColumnInitData的列的名字 if(localStorage.getItem("columnSet")){ this.showColumn = JSON.parse(localStorage.getItem("columnSet")) }else{ this.showColumn = { date: true, name: true, provinces: true, city: true, adreess: true, zipCode: true, }; } }, methods: { handleClick(row) { console.log(row); }, saveColumn() { localStorage.setItem("columnSet",JSON.stringify(this.showColumn)) this.visible = false; }, }, }; </script>

//css

<style lang="postcss" scoped> /* 控制淡入淡出效果 */ .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; } .fade-enter, .fade-leave-to { opacity: 0; } </style>

标签:city,vue,name,普陀区,加科,date,列宽,showColumn,true
来源: https://www.cnblogs.com/HtmlDuck/p/16325887.html