Dth-ui NPM | npm.io

dth-ui

云南大通汇web前端模板

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

API

For detailed explanation on how things work, consult the docs for vue-loader.

这里关于表格的属性和事件只列出新增和有别于iview的属性，其他的属性和事件都可以设置，参考iview table参考文档。 row-class-name不建议再另外设置了，不然会影响封装实现的一些样式；

Table Attributes

属性	说明	类型	参数	默认值
data	表格的数据	Array	-	[]
columns	列配置，参照iview表格组件，索引列和多选无需配置	Array	-	[]
total	数据总数	Number	-	0
type	表格的类型序号（index）单选(Radio) 多选(Check)	String	-	'index'
show-page	是否显示分页	Boolean	-	true
justifyContent	分页显示位置 flex-start center flex-end	String	-	center
show-elevator	是否显示页码电梯，可以快速切换到某一页	Boolean	-	false
pageSizeOpts	分页每页大小切换配置	Array	-	10, 20, 30, 40

Table Methods

方法名	说明	参数	返回值
on-check-select	多选获取选中的行数据	-	Array
on-Radio-select	单选多选获取选中的行数据	Object	-
on-db-select	双击选中事件	-	(row, index)
on-change-page	切换index 切换size	-	Object, {page, size}

使用slot自定义列

<dth-table
      type="Check"
      :columns="column"
      :data="data"
      @on-check-select="selectTable"
      @on-db-select="selectTableDb"
      @on-Radio-select="selectRadioTable"
      :showPage="true"
      :border="true"
      :total="20"
      justifyContent="flex-start"
      @on-change-page="onChangePage"
    >
    <template slot-scope="{data}"  slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="show(data.index)">View</Button>
                <Button type="error" size="small" @click="remove(data.index)">Delete</Button>
            </template>
            </dth-table>

列配置:

// slot的值为模板里的slot值
{
   title: '操作',
   align: 'center',
   slot: 'action'
},

2 years ago

2 years ago

2 years ago

2 years ago