feat: table 支持标题自定义
This commit is contained in:
		
							parent
							
								
									529d21c593
								
							
						
					
					
						commit
						7d39b0e267
					
				@ -261,6 +261,7 @@ export default {
 | 
			
		||||
      <lay-button size="sm">删除</lay-button>
 | 
			
		||||
    </template>
 | 
			
		||||
    <template v-slot:username="{ data }"> {{data.username}} </template>
 | 
			
		||||
    <template v-slot:username-title>😊</template>
 | 
			
		||||
    <template v-slot:password="{ data }"> {{data.password}} </template>
 | 
			
		||||
    <template v-slot:operator="{ data }">
 | 
			
		||||
      <lay-button >修改</lay-button>
 | 
			
		||||
@ -283,6 +284,7 @@ export default {
 | 
			
		||||
      {
 | 
			
		||||
        title:"账户",
 | 
			
		||||
        width:"200px",
 | 
			
		||||
        titleSlot: "username-title",
 | 
			
		||||
        customSlot:"username",
 | 
			
		||||
        key:"username"
 | 
			
		||||
      },{
 | 
			
		||||
@ -384,8 +386,8 @@ export default {
 | 
			
		||||
| key        | 数据字段   | --   |
 | 
			
		||||
| customSlot | 自定义插槽 | --   |
 | 
			
		||||
| width      | 宽度       | --   |
 | 
			
		||||
| sort      | 排序       | --   |
 | 
			
		||||
 | 
			
		||||
| sort       | 排序       | --   |
 | 
			
		||||
| titleSlot  | 标题插槽   | --   |
 | 
			
		||||
:::
 | 
			
		||||
 | 
			
		||||
::: comment
 | 
			
		||||
 | 
			
		||||
@ -20,7 +20,8 @@
 | 
			
		||||
          <li>[新增] date-picker 组件 name 属性, 等同原生 name 属性。</li>
 | 
			
		||||
          <li>[新增] date-picker 组件 type 属性 date 值, 支持日期选择。 </li>
 | 
			
		||||
          <li>[新增] date-picker 组件 type 属性 datetime 值, 支持日期时间选择。</li>
 | 
			
		||||
          <li>[新增] date-picker 组件 now 操作, 将日期重置为当前。</li>
 | 
			
		||||
          <li>[新增] date-picker 组件 now 操作, 将 年 月 日 重置为当前日期。</li>
 | 
			
		||||
          <li>[新增] table 组件 data 属性 titleSlot 选项, 自定义标题插槽。
 | 
			
		||||
          <li>[修复] menu 组件 level 属性的语义与实际功能相悖。</li>
 | 
			
		||||
          <li>[修复] input 组件 height 高度固定 38 px。</li>
 | 
			
		||||
          <li>[修复] step 组件 line 样式。</li>
 | 
			
		||||
 | 
			
		||||
@ -1,6 +1,6 @@
 | 
			
		||||
{
 | 
			
		||||
  "name": "@layui/layui-vue",
 | 
			
		||||
  "version": "0.4.3-alpha.1",
 | 
			
		||||
  "version": "0.4.3-alpha.2",
 | 
			
		||||
  "author": "就眠儀式",
 | 
			
		||||
  "license": "MIT",
 | 
			
		||||
  "description": "a component library for Vue 3 base on layui-vue",
 | 
			
		||||
 | 
			
		||||
@ -246,12 +246,19 @@ onMounted(() => {
 | 
			
		||||
                </th>
 | 
			
		||||
                <template v-for="column in columns" :key="column">
 | 
			
		||||
                  <th v-if="tableColumnKeys.includes(column.key)">
 | 
			
		||||
                    <!-- TODO Table header slot  -->
 | 
			
		||||
                    <div
 | 
			
		||||
                      class="layui-table-cell"
 | 
			
		||||
                      :style="{ width: column.width }"
 | 
			
		||||
                    >
 | 
			
		||||
                      <span>{{ column.title }}</span>
 | 
			
		||||
                      <span v-if="column.titleSlot">
 | 
			
		||||
                          <template v-if="column.titleSlot">
 | 
			
		||||
                              <slot :name="column.titleSlot"></slot>
 | 
			
		||||
                          </template>
 | 
			
		||||
                          <template>
 | 
			
		||||
                            {{column.title}}
 | 
			
		||||
                          </template>
 | 
			
		||||
                      </span>
 | 
			
		||||
                      <span v-else>{{ column.title }}</span>
 | 
			
		||||
                      <span
 | 
			
		||||
                        v-if="column.sort"
 | 
			
		||||
                        class="layui-table-sort layui-inline"
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user