注意：需要安裝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>