PmTable

基础用法

基础用法

<template>
  <pm-table :columns="columns" border :tableData="tableData"></pm-table>
</template>
<script>
export default {
  data () {
    return {
      tableData: [
        {
          name: "zzr",
          age: "25"
        }
      ],
      columns: [
        { label: "姓名", prop: "name" },
        { label: "年龄", prop: "age" }
      ]
    }
  }
}
</script>

显示代码 复制代码 复制代码

自定义 column

column

<template>
  <pm-table :columns="columns" border :tableData="tableData">
    <span slot="name" slot-scope="{ row }">{{ `自定义：` + row.name }}</span>
  </pm-table>
</template>
<script>
export default {
  data () {
    return {
      tableData: [
        {
          name: "zzr",
          age: "25"
        }
      ],
      columns: [
        { label: "姓名", prop: "name", scope: "name" },
        { label: "年龄", prop: "age" }
      ]
    }
  }
}
</script>

显示代码 复制代码 复制代码

列头控制

<template>
  <pm-table :columns="columns" border :tableData="tableData" editColumns>
    <span slot="name" slot-scope="{ row }">{{ `自定义：` + row.name }}</span>
  </pm-table>
</template>
<script>
export default {
  data () {
    return {
      tableData: [
        {
          name: "zzr",
          age: "25"
        }
      ],
      columns: [
        { label: "姓名", prop: "name", scope: "name" },
        { label: "年龄", prop: "age" }
      ]
    }
  }
}
</script>

显示代码 复制代码 复制代码

自定义 列头

可通过使用slot来自定义列头，插槽名后要加上‘-header’后缀

column

<template>
  <pm-table :columns="columns" border :tableData="tableData">
      <template slot="name-header" slot-scope="{row}">
          <div slot="name-header">{{ `自定义：` + row.label }}</div>
      </template>
  </pm-table>
</template>
<script>
export default {
  data () {
    return {
      tableData: [
        {
          name: "zzr",
          age: "25"
        }
      ],
      columns: [
        { label: "姓名", prop: "name", scope: "name" },
        { label: "年龄", prop: "age" }
      ]
    }
  }
}
</script>

显示代码 复制代码 复制代码

自定义 列内容

可通过使用slot，来自定义表格列内容（可设置表单，如：输入框、按钮等）

column

<template>
  <pm-table :columns="columns" border :tableData="tableData">
    <template slot="name" slot-scope="scope">
        <el-input v-model="scope.row.name"/>
    </template>
    <template slot="age" slot-scope="scope">
        <el-input v-model="scope.row.age"/>
    </template>
    <template slot="action" slot-scope="scope">
        <el-button type="text" icon="el-icon-edit">编辑</el-button>
        <el-button type="text" icon="el-icon-delete">删除</el-button>
    </template>
  </pm-table>
</template>
<script>
export default {
  data () {
    return {
      tableData: [
        {
          name: "",
          age: ""
        },
      ],
      columns: [
        { label: "姓名", prop: "name", scope: "name" },
        { label: "年龄", prop: "age", scope: "age" },
        { label: "操作", prop: "action", scope: "action"}
      ]
    }
  }
}
</script>

显示代码 复制代码 复制代码

checked

checked

<template>
  <pm-table :columns="columns" border :tableData="tableData" checked autoSelectRow>
    <span slot="name" slot-scope="{ row }">{{ `自定义：` + row.name }}</span>
  </pm-table>
</template>
<script>
export default {
  data () {
    return {
      tableData: [
        {
          name: "zzr",
          age: "25"
        }
      ],
      columns: [
        { label: "姓名", prop: "name", scope: "name" },
        { label: "年龄", prop: "age" },
      ]
    }
  }
}
</script>

显示代码 复制代码 复制代码

typeof value object && value

typeof value object && value

<template>
  <pm-table :columns="columns" border :tableData="tableData" checked autoSelectRow>
    <span slot="name" slot-scope="{ row }">{{ `自定义：` + row.name }}</span>
  </pm-table>
</template>
<script>
export default {
  data () {
    return {
      tableData: [
        {
          name: "zzr",
          age: "25",
          detail: {
            birthday: "1995.08.02"
          }
        }
      ],
      columns: [
        { label: "姓名", prop: "name", scope: "name" },
        { label: "年龄", prop: "age" },
        { label: "详细信息", prop: "detail" }
      ]
    }
  }
}
</script>

显示代码 复制代码 复制代码

继承element 属性和事件 (opens new window)、

:::tip 可以通过 this.$refs[{refName}].tablerRef 获取el-table实例 :::

Attribute

参数	说明	类型	可选值	默认值
tableData	被渲染的数据	Array	-	—
columns	列头配置项	Array	-	—
checked	可勾选	boolean	-	false
showIndex	显示索引	boolean	-	false
detailKeyWidth	某一条数据为object是用dialog展示key宽度	number	-	100
editColumns	是否显示列头控件	boolean	-	false
autoSelectRow	点击当前行选中复选框	boolean	-	false

实例事件

事件名称	说明	参数
getSelectRows	获取选中的rows	-
rerender	重回table	-
changeColumns	动态改变columns	columns
toggleSelection	选中rows	rows

Columns

参数	说明	类型	可选值	默认值
prop	object key	string	-	—
scope	插槽name	string	-	—
label	表头	string	-	-

支持其他el-table-column attr