<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>

<template>
  <el-form size="mini">
    <el-row>
      <el-col :span="18">
        <z-table v-model="tableData" type="editable" border :columns="columns">
          <template #column-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>
      </el-col>
      <el-col :span="6" style="padding-left: 10px">
        <pre class="demo-model">{{ tableData }}</pre>
      </el-col>
    </el-row>
  </el-form>
</template>

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