diff --git a/docs/.vuepress/components/docsComponents/TTable/align.vue b/docs/.vuepress/components/docsComponents/TTable/align.vue new file mode 100644 index 000000000..86f0997d9 --- /dev/null +++ b/docs/.vuepress/components/docsComponents/TTable/align.vue @@ -0,0 +1,102 @@ +<template> + <t-layout-page> + <t-layout-page-item> + <t-table title="对齐方式" :table="table" :align="align" :columns="table.columns"> + <template #title> + <el-radio-group v-model="align" size="small" style="margin-bottom: 15px"> + <el-radio-button label="left">左对齐</el-radio-button> + <el-radio-button label="center">居中</el-radio-button> + <el-radio-button label="right">右对齐</el-radio-button> + </el-radio-group> + </template> + <template #toolbar> + <el-button size="default" type="danger" @click="setDateLeft">点击{{ setDate }}左对齐</el-button> + <el-button size="default" type="primary" @click="setNameRight">点击{{ setName }}右对齐</el-button> + </template> + </t-table> + </t-layout-page-item> + </t-layout-page> +</template> + +<script> +export default { + data() { + return { + align: 'center', + setDate: '设置日期', + setName: '设置姓名', + table: { + data: [ + { + id: "1", + date: "2019-09-25", + date1: "2019-09-26", + name: "张三", + status: "2", + address: "广东省广州市天河区" + }, + { + id: "2", + date: "2019-09-26", + date1: "2019-09-27", + name: "张三1", + status: "1", + address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2" + }, + { + id: "3", + date: "2019-09-26", + date1: "2019-09-28", + name: "张三1", + status: "1", + address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2" + }, + { + id: "4", + date: "2019-09-26", + date1: "2019-09-29", + name: "张三1", + status: "1", + address: "广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2" + } + ], + columns: [ + { prop: "name", label: "姓名", minWidth: "100", align: "" }, + { prop: "date", label: "日期", minWidth: "180", align: "" }, + { prop: "status", label: "状态", minWidth: "80" }, + { prop: "address", label: "地址", minWidth: "220" } + ] + }, + + } + }, + methods: { + setDateLeft() { + this.table.columns.forEach(item => { + if (item.prop === "date") { + if (item.align == "left") { + item.align = "" + this.setDate = "设置日期" + } else { + this.setDate = "取消日期" + item.align = "left" + } + } + }) + }, + setNameRight() { + this.table.columns.forEach(item => { + if (item.prop === "name") { + if (item.align == "right") { + item.align = "" + this.setName = "设置姓名" + } else { + this.setName = "取消姓名" + item.align = "right" + } + } + }) + } + }, +} +</script> diff --git a/docs/.vuepress/components/docsComponents/TTable/allShow.vue b/docs/.vuepress/components/docsComponents/TTable/allShow.vue new file mode 100644 index 000000000..9ccab1704 --- /dev/null +++ b/docs/.vuepress/components/docsComponents/TTable/allShow.vue @@ -0,0 +1,48 @@ +<template> + <t-layout-page> + <t-layout-page-item> + <t-table :table="table" :columns="table.columns" /> + </t-layout-page-item> + </t-layout-page> +</template> + +<script> +export default { + data() { + return { + table: { + data: [ + { + id: '1', + date: '2019-09-25', + name: '张三', + status: '2', + address: '广东省广州市天河区' + }, + { + id: '2', + date: '2019-09-26', + name: '张三1', + status: '1', + address: '广东省广州市天广东省广州市天河区2广东省广州市天广东省广州市天河区2' + }, + { + id: '3', + date: '2019-09-27', + name: '张三2', + status: '3', + address: '广东省广州市天河区3' + } + ], + columns: [ + { prop: 'name', label: '姓名', minWidth: '100' }, + { prop: 'date', label: '日期', minWidth: '180' }, + { prop: 'address', label: '设置allShow自动显示列宽', allShow: true }, + { prop: 'date', label: '日期', minWidth: '180' }, + ] + }, + + } + } +} +</script> diff --git a/docs/.vuepress/components/docsComponents/TTable/base.vue b/docs/.vuepress/components/docsComponents/TTable/base.vue index e9fcb6c63..62863e5d5 100644 --- a/docs/.vuepress/components/docsComponents/TTable/base.vue +++ b/docs/.vuepress/components/docsComponents/TTable/base.vue @@ -6,6 +6,8 @@ title="此排序仅可点击图标才生效" :table="table" :columns="columns" + :header-cell-style="{background: 'red',height: '50px'}" + :row-style="{ height: '52px'}" size="mini" :rowClassName="rowClassName" /> diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 9282e5f87..254a6b479 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -160,6 +160,8 @@ module.exports = { 'TTable/pageCheck', // 基本复选--翻页选中 'TTable/firstRadioOrIndex', // 显示单选框和序列号 'TTable/firstSelectionOrIndex', //显示多选框和序列号 + 'TTable/allShow', //列宽自动适应单元格显示内容 + 'TTable/align', //对齐方式 'TTable/expand', // 展开行 'TTable/pagination', // 分页 'TTable/virtual', // 虚拟列表 diff --git a/docs/baseComponents/TTable/align.md b/docs/baseComponents/TTable/align.md new file mode 100644 index 000000000..88cffb5e3 --- /dev/null +++ b/docs/baseComponents/TTable/align.md @@ -0,0 +1,14 @@ +# 对齐方式 + +--- + +<common-code-format> + <docsComponents-TTable-align slot="source"></docsComponents-TTable-align> +配置 + + 在`TTable`组件中添加`align:'center'`设置整个 table 对齐方式 + + 在`columns`中设置`align`设置每列对齐方式(`columns优先级`高于`整体的对齐方式`)----`align`可选值`left`、`center`、`right`<br/> + + <<< @/docs/.vuepress/components/docsComponents/TTable/align.vue +</common-code-format> diff --git a/docs/baseComponents/TTable/allShow.md b/docs/baseComponents/TTable/allShow.md new file mode 100644 index 000000000..4ad2579bb --- /dev/null +++ b/docs/baseComponents/TTable/allShow.md @@ -0,0 +1,11 @@ +# 列宽自动适应单元格显示内容 + +--- + +<common-code-format> + <docsComponents-TTable-allShow slot="source"></docsComponents-TTable-allShow> + + 在`columns`中设置`allShow:true`此列会自适应宽度显示单元格内容 + + <<< @/docs/.vuepress/components/docsComponents/TTable/allShow.vue +</common-code-format> diff --git a/docs/baseComponents/TTable/help.md b/docs/baseComponents/TTable/help.md index 471a9600e..4b5508bff 100644 --- a/docs/baseComponents/TTable/help.md +++ b/docs/baseComponents/TTable/help.md @@ -34,6 +34,8 @@ | ---currentPage | 是否需要显示切换页条数 | Number | - | | columns | 表头信息 | Array | [] | | ----sort | 排序 (设置:sort:true) | Boolean | false | +| ----allShow | 是否开启列宽自动适应单元格显示内容 | Boolean | false | +| ----align | 设置每列对齐方式,此优先级`高于`整体的对齐方式` | string | 'center' | | ----headerRequired | 是否显示表头必填'\*' | Boolean | false | | ----renderHeader | 列标题 Label 区域渲染使用的可以用 jsx 方式 | Function | - | | ----allShow | 自动根据内容撑满列宽(默认取自己设置的minWidth,设置allShow:true,自动根据内容撑满列宽) | Boolean | - | @@ -57,6 +59,7 @@ | ----configEdit | 表格编辑配置(开启编辑功能有效) | Object | - | | ----------rules | 规则(可依据 elementUI el-form 配置————对应 columns 的 prop 值) | Object | - | | ----------label | placeholder 显示 | String | - | +| ----------className | 每一项的自定义class | String | - | | ----------editComponent | 组件名称可直接指定全局注册的组件,也可引入第三方组件 | String | input | | ----------bind | 第三方 UI 的 Attributes及tooltip的Attributes | Object | - | | ----------eventHandle | 第三方 UI 的 事件(返回两个参数,第一个自己自带,第二个 scope) | Object | - | @@ -107,6 +110,7 @@ | rowClassName | 行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。 | Function({row, rowIndex})/String | - | | isSlotToolbar | TAdaptivePage组件是否使用了Toolbar插槽 | Boolean | - | | isSlotTitle | TAdaptivePage组件是否使用了title插槽 | Boolean | - | +| align | 整体对齐方式 (选值`left`、`center`、`right`) | String | 'center' | ## Methods 方法(继承el-table的所有方法) diff --git a/packages/table/src/TTableColumn.vue b/packages/table/src/TTableColumn.vue index acf00bae0..59ab26eb0 100644 --- a/packages/table/src/TTableColumn.vue +++ b/packages/table/src/TTableColumn.vue @@ -3,7 +3,7 @@ :prop="item.prop" :label="item.label" :type="item.type" - :align="item.align || 'center'" + :align="item.align || align" :fixed="item.fixed" :min-width="item['min-width'] || item.minWidth || item.width" > @@ -26,7 +26,7 @@ :width="val.allShow ? flexColumnWidth(val.prop,table.data,index,val['min-width'] || val.minWidth || val.width) : val.width" :sortable="val.sort" :render-header="val.renderHeader||(val.headerRequired&&renderHeader)" - :align="val.align || 'center'" + :align="val.align || align" :fixed="val.fixed" :show-overflow-tooltip="val.noShowTip" v-bind="{...val.bind,...$attrs}" @@ -98,6 +98,10 @@ export default { default: () => { return {} } + }, + align: { + type: String, + default: 'center' } }, methods: { diff --git a/packages/table/src/index.vue b/packages/table/src/index.vue index 4a86b5041..868765d62 100644 --- a/packages/table/src/index.vue +++ b/packages/table/src/index.vue @@ -104,7 +104,7 @@ width: table.firstColumn.width || 55, label: table.firstColumn.label, fixed: table.firstColumn.fixed, - align: table.firstColumn.align || 'center', + align: table.firstColumn.align || align, 'reserve-selection': table.firstColumn.isPaging || false, selectable: table.firstColumn.selectable || selectable, ...table.firstColumn.bind, @@ -124,7 +124,7 @@ (table.firstColumn.type === 'expand' && '') || '', fixed: table.firstColumn.fixed, - align: table.firstColumn.align || 'center', + align: table.firstColumn.align || align, ...table.firstColumn.bind, ...$attrs, }" @@ -159,7 +159,7 @@ width: item.width || 55, label: item.label, fixed: item.fixed, - align: item.align || 'center', + align: item.align || align, 'reserve-selection': item.isPaging || false, selectable: item.selectable || selectable, ...item.bind, @@ -180,7 +180,7 @@ (item.type === 'expand' && '') || '', fixed: item.fixed, - align: item.align || 'center', + align: item.align || align, ...item.bind, ...$attrs, }" @@ -221,7 +221,7 @@ :class-name="item.allShow&&!isEditCell?'flex_column_width':''" :width="item.allShow&&!isEditCell ? flexColumnWidth(item.prop,table.data,index,item['min-width'] || item.minWidth || item.width) : item.width" :sortable="item.sort || sortable" - :align="item.align || 'center'" + :align="item.align || align" :fixed="item.fixed" :show-overflow-tooltip="isShowOverflowTooltip(item)" v-bind="{ ...item.bind, ...$attrs }" @@ -381,6 +381,7 @@ :key="index + 'i'" :item="item" :table="table" + :align="align" :tableRef="$refs['el-table']" > <template v-for="(index, name) in $slots" v-slot:[name]> @@ -400,7 +401,7 @@ :min-width="table.operatorConfig && table.operatorConfig.minWidth" :width="table.operatorConfig && table.operatorConfig.width" :align=" - (table.operatorConfig && table.operatorConfig.align) || 'center' + (table.operatorConfig && table.operatorConfig.align) || align " v-bind="{ ...(table.operatorConfig && table.operatorConfig.bind), @@ -541,6 +542,11 @@ export default { type: String, default: '保存' }, + // table 全局对齐方式,可选项'left' | 'center' | 'right' + align: { + type: String, + default: 'center' + }, // 是否开启tree树形结构样式 isShowTreeStyle: Boolean, // 表格标题