(vue)Iview表格操作列在编辑页面隐藏或当前页不显示具有隐藏属性的列

(vue)Iview表格操作列在编辑页面隐藏

    <Table
      :columns="colHidden"
      :data="tableData"
      :disabled-hover="true"
      ref="selection"
      @on-selection-change="handleSelectChange"
    >
      <template slot-scope="{ index }" slot="headEntity">
        <Input v-model="tableData[index].headEntity" placeholder="头实体名称" />
      </template>
 		...
 		...
      <template slot-scope="{ row, index }" slot="action" v-if="!edit">
        <Icon
          type="ios-add-circle-outline"
          style="padding-right: 10px"
          @click="handleAddparam"
        />
        <Icon type="ios-trash-outline" @click="handleParam(row, index)" />
      </template>
    </Table>

 data() {
    return {
      paramscol: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "头实体名称",
          slot: "headEntity",
        },
        {
          title: "关系名称",
          slot: "relation",
        },
        {
          title: "尾实体名称",
          slot: "endEntity",
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
        },
	]
  }
},
//计算属性
computed: { 
  colHidden: function () {
    if (this.edit == true) { //判断是否为编辑页面
      return this.paramscol.filter(function (e) { //如果是则过滤掉操作列
        if (e.title != "操作") {
          return e;
        }
      });
    } else {
      return this.paramscol; //如果否则原列返回
    }
  },
},

案例二：

<Table
  ref="selection"
  :columns="colHidden"  //除去隐藏列的表头
  :data="tableDataNew"
  @on-selection-change="handleSelectChange"
> 
</Table>

data(){
	return {
		paramscol: [
	        {
	          title: "条件",
	          key: "condition",
	          align: "center",
	          hidde：true,
	        },
	        {
	          title: "内容",
	          key: "content",
	          align: "center",
	          ellipsis: true, //过长省略
	        },
	        {
	          title: "操作",
	          slot: "operation",
	          align: "center",
	        },
	    ],
	}
}
computed: { 
 colHidden: function () {
   return this.columns.filter(function (e) {
     return !e.hidden;  //过滤不用隐藏的列
   });
 },
},