About element.ui Table display hides selected headers

the example of the official website is to choose to show and hide a certain row. How do you want to control how to show and hide a certain column? For example, hide the address and label columns.
after looking up the information for a long time, I can"t understand it. Please take a look at it.

Mar.28,2021

amount. If you want to hide a column, you can hide the corresponding el-table-column


.

https://jsfiddle.net/xbn6w8sa/1/

like this


try this

   <el-table-column v-for="(item, index) in config" :key="index" v-if="item.name!==''" >
       
      </el-table-column>

data data


    config: [
      {
          name: "",
          width: "160px",
          prop: "date"
        },
      {
          name: "",
          width: "160px",
          prop: "name"
        },
        {
          name: "",
          width: "160px",
          prop: "location"
        },
        {
          name: "",
          width: "160px",
          prop: "tip"
        },
      ]
Menu