frontend / zee

table.md 2.05 KB

Table 表格

拓展ElementUI的el-table

b52e633ca637d904b0cddd7831b5d60437692eea/examples/views/docs/component/table.md#">基础用法

基本参数与ElementUI的el-table相同。

::: snippet 支持来自表单的size继承

<template>
  <el-form size="mini">
    <z-table :data="tableData" border>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
    </z-table>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: '31', gender: '男' },
        { name: '李四', age: '27', gender: '女' },
        { name: '王五', age: '16', gender: '男' },
      ],
    };
  },
}
</script>

:::

b52e633ca637d904b0cddd7831b5d60437692eea/examples/views/docs/component/table.md#">可编辑表格

一般用于表格的静态数据编辑

::: snippet 设置type为editable开启可编辑模式

<template>
  <z-table v-model="tableData" type="editable" border :columns="columns">
    <template #editor-gender="{ value, onInput }">
      <el-radio-group size="mini" :value="value" @input="onInput">
        <el-radio-button label="男">男</el-radio-button>
        <el-radio-button label="女">女</el-radio-button>
      </el-radio-group>
    </template>
  </z-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 31, gender: '男', remark: '' },
        { name: '李四', age: 27, gender: '女', remark: '' },
        { name: '王五', age: 16, gender: '男', remark: '' },
      ],
      columns: [
        { prop: 'name', label: '姓名', editable: false },
        { type: 'el-input-number', prop: 'age', label: '年龄' },
        { prop: 'gender', label: '性别' },
        { prop: 'remark', label: '备注' },
      ]
    };
  },
}
</script>

:::

API

Attribute 属性

参数|说明|类型|可选值|默认值 -|-|-|-|- data | 表格数据 | Array | - | - value | 表格数据（支持v-model） | Array | - | [] columns | 表格列配置 | Array | - | [] type | 表格类型 | String | normal、editable | normal