frontend / zee

table.md 1.63 KB

Table 表格

拓展ElementUI的el-table

8657d1e91433c9104dd0fa5377c4c690c4a36978/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>

:::

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

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

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

<template>
  <el-form size="mini">
    <el-row>
      <el-col :span="18">
        <z-table :value="tableData" type="editable" border :columns="columns"></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: '姓名' },
        { type: 'el-input-number', prop: 'age', label: '年龄' },
        { prop: 'gender', label: '性别' },
      ]
    };
  },
}
</script>

:::