iview表格某一列可隐藏

在 iView 表格中，如果需要隐藏某一列，可以使用 iView 表格的 columns 属性，并设置该列的 show 属性为 false。具体步骤如下：

<template>
  <Table :columns="columns" :data="tableData"></Table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '年龄',
          key: 'age',
          show: false // 隐藏该列
        }
      ],
      tableData: [
        {
          name: '张三',
          age: 18
        },
        {
          name: '李四',
          age: 20
        }
      ]
    }
  }
}
</script>

以上代码中，第二列的 show 属性被设置为 false，表示该列会被隐藏。通过这种方式，可以在 iView 表格中隐藏某一列。

相关问题

vue的iview表格某一列可点击按钮

在 iView 表格的某一列中添加可点击按钮，可以使用 iView 表格的 slot-scope 属性以及 iView 中的 Button 组件。具体步骤如下：

1. 在 iView 表格中的 columns 属性中添加要添加按钮的列，并设置 slot-scope 属性：

<template>
  <Table :columns="columns" :data="tableData">
    <template slot-scope="{row}">
      <Button type="primary" @click="handleClick(row)">点击</Button>
    </template>
  </Table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '操作',
          slot: 'actions'
        }
      ],
      tableData: [
        {
          name: '张三'
        },
        {
          name: '李四'
        }
      ]
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
    }
  }
}
</script>

2. 在 iView 表格中的 template 标签中添加要添加按钮的内容，并设置 slot 属性为 actions：

<template>
  <Table :columns="columns" :data="tableData">
    <template slot-scope="{row}">
      <span slot="actions">
        <Button type="primary" @click="handleClick(row)">点击</Button>
      </span>
    </template>
  </Table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '操作',
          slot: 'actions'
        }
      ],
      tableData: [
        {
          name: '张三'
        },
        {
          name: '李四'
        }
      ]
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
    }
  }
}
</script>

以上两种方法都可以实现在 iView 表格的某一列中添加可点击按钮的效果。

vue的iview表格某一列可修改属性

在 iView 表格的某一列中添加可修改属性，可以使用 iView 表格的 slot-scope 属性以及 iView 中的 Input 组件。具体步骤如下：

1. 在 iView 表格中的 columns 属性中添加要添加可修改属性的列，并设置 slot-scope 属性：

<template>
  <Table :columns="columns" :data="tableData">
    <template slot-scope="{row}">
      <Input v-model="row.name" @on-blur="handleBlur(row)" />
    </template>
  </Table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '年龄',
          key: 'age'
        }
      ],
      tableData: [
        {
          name: '张三',
          age: 18
        },
        {
          name: '李四',
          age: 20
        }
      ]
    }
  },
  methods: {
    handleBlur(row) {
      console.log(row)
    }
  }
}
</script>

2. 在 iView 表格中的 template 标签中添加要添加可修改属性的内容，并设置 v-model 属性为 row 对应的属性：

<template>
  <Table :columns="columns" :data="tableData">
    <template slot-scope="{row}">
      <span slot="name">
        <Input v-model="row.name" @on-blur="handleBlur(row)" />
      </span>
      <span slot="age">
        <Input v-model="row.age" @on-blur="handleBlur(row)" />
      </span>
    </template>
  </Table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          slot: 'name'
        },
        {
          title: '年龄',
          slot: 'age'
        }
      ],
      tableData: [
        {
          name: '张三',
          age: 18
        },
        {
          name: '李四',
          age: 20
        }
      ]
    }
  },
  methods: {
    handleBlur(row) {
      console.log(row)
    }
  }
}
</script>

以上两种方法都可以实现在 iView 表格的某一列中添加可修改属性的效果。