基于饿了吗+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>
<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>
<style lang="postcss" scoped>
/* 控制淡入淡出效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>